I am working with an Extjs treepanel that has several layers added to it. Additionally, I have a search panel with a search button. Clicking on the search button displays the results in an extjs gridview.
My goal is to show layers by clicking on a row in the gridview and dynamically or programmatically set the checkbox of the treepanel to true. Here is how I added the tree panel:
var layerTree = new Ext.tree.TreePanel({
border: true,
root: layerList,
split: true,
containerScroll: true,
collapseMode: "mini",
autoScroll: true,
loader: new Ext.tree.TreeLoader({
applyLoader: false,
uiProviders: {
"layernodeui": LayerNodeUI
}
}),
root: {
nodeType: "async",
children: Ext.decode(treeConfig)
},
listeners: {
"radiochange": function(node) {}
},
rootVisible: false,
lines: false
});
I want to achieve something like layernode.checked=true
Thank you Akatum for your suggestion:
In your grid configuration, you need to set up a listener for the itemclick event, which is triggered when a user clicks on a row in the grid. In this listener, you can retrieve information about the layer from the row record. Then, you can locate the layer node in the tree using the getNodeById method from Ext.data.TreeStore and set its checked attribute to true.
So, in your grid configuration, you would have:
listeners: {
itemclick: function(c, record) {
// get layer id from clicked row record
var layerId = record.get('layerId');
// find layer node in tree by layer id
var node = layerTree.getStore().getNodeById(layerId);
// set node checked attribute to true
node.set('checked', true);
}
}
I attempted to implement your code, but it doesn't seem to be working. I integrated your suggested code into my existing code like this:
var grid = new Ext.grid.GridPanel({
store: new Ext.data.JsonStore({
fields: action.result.fields,
listeners: {
load: function() {
setTimeout(function() {
grid.getSelectionModel().selectFirstRow();
}, 100);
}
}
}),
frame: true,
columns: action.result.columns,
stripeRows: true,
listeners: {
itemclick: function(c, record) {
var layerId = record.get('layerId');
var node = layerTree.getStore().getNodeById(layerId);
node.set('checked', true);
}
}
});