PDA

View Full Version : How to receive enclosing DOM element of node in Ext.tree.Panel



KingWarin
19 Oct 2011, 3:51 AM
Hey,

I'm migrating an application from ExtJS3 to ExtJS4 and am not able to recieve the DOM element of a node i'm searching for.
I've set up a viewport in which a "library" shall be displayed. In ext3.3 a Ext.tree.TreePanel was used and the (dynamically added) child nodes been Ext.tree.TreeNode objects.

While using ExtJS 3.3 the element could be referenced almost directly by using
node.ui.elNode

Now using ExtJS 4 and due to tree.Panel is now bound to an Ext.data.TreeStore its not possible anymore to get an reference to the element using node.ui.elNode as "ui" is not longer a part of an "node" (node is created using "appendChild(..)")

I already managed to access the node im working on (using libraryStore.getNodeById() ; libraryStore is an instance of Ext.data.TreeStore) and also to access its attributes but i just cant work out how to adress the dom element.

I already thought of accessing it using Ext.tree.Panel s down(), child() or nextNode() functions but i dont know what string to use for the ComponentQuery.

Hope its possible to see what my problem is and maybe someone has a solution for it.

thx in advance

cheers
Sven

skirtle
19 Oct 2011, 5:50 AM
I'll try to explain this but it can be a little confusing.

Firstly, ComponentQuery won't help you. Component queries are used to find components, navigating the items/ownerCt hierarchy. They can't return HTML elements.

In ExtJS 4 a tree is rendered using a View (what used to be called a DataView). Views map a store of records to HTML elements. Each record will have a single root HTML element. This element is referred to as the node for that record. This should not be confused with the nodes of the tree. Each tree node corresponds to a record and each of those records will have an HTML node in the view.

One other thing that isn't obvious is that the tree node and the record are the same object.

Once you have the record (which it appears you've already got) you can get the corresponding view node using getNode:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.View-method-getNode

KingWarin
19 Oct 2011, 7:19 AM
Had to rewrite some additional parts of my code, but with the knowledge that tree node is the same like record and usage of getNode (which strangely isnt displayed in my local API documentation) i could retrieve the dom element and this part works now...

thank u very much