I have an Extjs treepanel to which I have added a number of layers. Also, I have a search panel containing a search button. When search button is clicked, it returns the results in a extjs gridview.
I want to show layers by clicking on gridviews row and set checkbox of treepanel to true either dynamically or programatically
I have added tree panel like
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
});
And I want like layernode.checked=true
Thanks Akatum You said
In your grid configuration you need to setup listener for itemclick event, which is fired when user click on row in grid. In this listener you need to get information about layer from row record. Then you can find layer node in tree by Ext.data.TreeStore getNodeById method and set its checked attribute to true
So in your grid configuration you will 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 tried your code but its not working. I have added your suggested code in my 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);
}
}
});