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_panel.un('expandnode', select_node);
}
});
};
myTree.on('expandnode', select_node);
Tomáš Pospíšek
