Extjs: Tree, select node after creating tree

Question

I have a simple TreePanel. I would like to select a specific node at boot time. Nodes from a remote file (json).

The tree is loading as expected. However, node is not selectable. Firebug shows node as undefined. This is possible due to the async property. But I cannot configure this other wise or specify node.

Any suggestions are welcome and thanks.

LeftMenuTree = new Ext.tree.TreePanel({ renderTo: 'TreeMenu', collapsible: false, height: 450, border: false, userArrows: true, animate: true, autoScroll: true, id: 'testtest', dataUrl: fileName, root: { nodeType: 'async', iconCls:'home-icon', expanded:true, text: rootText }, listeners: { "click": { fn: onPoseClick, scope: this } }, "afterrender": { fn: setNode, scope: this } }); function setNode(){ alert (SelectedNode); if (SelectedNode == "Orders"){ var treepanel = Ext.getCmp('testtest'); var node = treepanel.getNodeById("PendingItems"); node.select(); } } 

Answer 1

This is because node cannot actually be selected until the tree is displayed. Try adding your choice of node to the event listener that listens for the rendering event.

Answer 2

I use this code in TreeGrid to select node

 _I.treeGrid.getSelectionModel().select(_I.treeGrid.getRootNode()); 

I have not tried this in a TreePanel, but since the TreeGrid is based on it, I just assume that it works. I used the bootloader loading event for a similar code plugin after executing an XHR request, so try writing the setNode function as follows:

 var loader = LeftMenuTree.getLoader(); loader.on("load", setNode); function setNode(){ alert (SelectedNode); if (SelectedNode == "Orders"){ var treepanel = Ext.getCmp('testtest'); treepanel.getSelectionModel().select(treepanel.getNodeById("PendingItems")); } } 

Answer 3

this work is for me ...

 var loader = Ext.getCmp('testtest').getLoader(); loader.on("load", function(a,b,c){ b.findChild("id",1, true).select(); // can find by any parameter in the json }); 

Answer 4

I have documented a way to do something very similar here:

http://www.sourcepole.ch/2010/9/28/understanding-what-s-going-on-in-extjs

what you need to make sure that the node you selected is displayed. You can achieve this by going through the tree and node.expand () of all the parents of the nodes (from root down).