# Understanding what's going on in ExtJS

Recently I had to pre-select a Node inside a TreePanel ExtJS widget. I tried many ways but failed because most of the time when I tried to:

  node.select();


that node would not yet be rendered into the browser’s DOM and so the select would fail somewhere inside the extjs.js blob with something like "this ... undefined ...". What I needed was a "rendered" event, but there doesn’t seem to be such an event for neither TreePanel not TreeNode or any of their superclasses. Diving into ExtJS code was not really very helpful because it’s a framework that does things through layers and layers and as such is not trivial to understand quickly.

Thus, the same ole problem with JavaScript as ever: “show me all the events there are”. However, surprisingly, in contrast to standard JavaScript, ExtJS has an easy standard way to accomplish this:


Ext.util.Observable.capture( myTree, function(event) {
console.log("got an event in myTree");
console.log(event); });


And quickly I discovered that there indeed is an obscure event that I can, out of alternatives, missuse to do what I want, which is expandnode.

Aparently, after a node is exapanded, all its children are put into the DOM and seem to be manipulable then. Thus:

        /*
* select node with real_id - this is only called once
* after the tree is rendered for the first time.
* After that the listener itself is unregistered.
*/
function select_node(node) {
node.eachChild( function(child) {
if(child.attributes.real_id == real_id ) {
child.select();
categories: [, , , , , , , , , , , , , categories_panel.un('expandnode',, select_node);]
}
});
};
myTree.on('expandnode', select_node);


Tomáš Pospíšek