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