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