Synching check change event for two TreePanel in EXTJS 4.1

Question

I have two ExtJs TreePanel. One tree is fully loaded (call it FLTree) and second one is partially loaded (call it PL tree). When user clicks on a node in fully loaded tree & that node is present in partially loaded tree, I want to fire the checkchange event for that node in partially loaded tree.

Is this possible?

Answer 1

Yes, Ext.tree.Panel has the itemclick event which is fired when an item is clicked (you need to add it in the controller or in the treepanel's listeners property. The attributes are:

someFunctionName: function(treeview, record, item, index, e, eOpts) { ... }

From the record variable you can get the data needed from the first tree's selected node.

To find the other treepanel you can use the up() and down() methods on the treeview:

var parentContainer = treeview.up('container_xtype[someProperty1=someValue1]');

you can walk up in the component hierarchy (get that parent container which contains both treepanels).

var pLtree = parentContainer.down('treepanel[someProperty2=someValue2]');

If the two treepanel doesn't have common parent, then you can use the

var pLtree = Ext.ComponentQuery.query('treepanel[someProperty2=someValue2]')[0];

global method which returns an array of matched components. BUT make sure that you use a good component selector query (you can check if the returned array's length == 1).

Finally you need to use the pLtree.fireEvent('checkchange', ...); which is described HERE.