ExtJS TreeLoader Issue

Question

I'm not too familiar with ExtJS, but am working on a project that uses it.

We are making use of a TreePanel with a TreeLoader that loads all node data from the server in one call. We have an event in which I need to access the attributes of every node in the tree. The way I am doing this is using the TreePanel's getNodeById method. The problem is that the tree panel seems to lazily load nodes and will not be able to retrieve a node with getNodeById unless the node has already been loaded.

Is there any way to force all nodes to be loaded? The closest I've come is by using the preloadChildren attribute on the TreeLoader, but this still only loads when the parent node containing children is loaded.

score 2 · Accepted Answer · answered Sep 30 '10 at 20:23

2

If you want to be able to access all the nodes, you must load the complete tree structure on the first call.

The JSON response on the first call should include all the tree nodes. For example:

[{
    id: 1,
    text: 'A leaf Node',
    leaf: true
},{
    id: 2,
    text: 'A folder Node',
    children: [{
        id: 3,
        text: 'A child Node',
        leaf: true
    }]

}]

answered Sep 30 '10 at 20:23

ncardeli

3,452
2
22
27

Hmm, this is pretty much how we have it. Using your example, if I do myTreePanel.getNodeById(3), it will give me undefined, unless I force it to load by expanding its parent (or clicking on its parent with preloadChildren set to true in the loader configuration). – rr. Sep 30 '10 at 20:38
Yes, using your data, I tried the following, which does not work: var treePanel = new Ext.tree.TreePanel({ id: 'structure-panel', loader: new Ext.tree.TreeLoader({ dataUrl: 'data.html', preloadChildren: true, listeners: { load: function(){ alert(treePanel.getNodeById('3')); } } }), root: new Ext.tree.TreeNode({ id: 'tree-root' }) }); treePanel.getLoader().load(treePanel.root); The alert in the load callback will have "undefined" – rr. Sep 30 '10 at 20:53
Could you post sample code and a sample server response with the nodes? Thanks. – ncardeli Sep 30 '10 at 20:53
Done, though comments strip the lines. The server response is what you gave as the sample JSON string. – rr. Sep 30 '10 at 20:55
2

Ok, I found the problem. First, you must use Ext.tree.AsyncTreeNode for the root node. The other thing you have to do is change the server response JSON, adding the "expanded: true" property to all non-leaf nodes. – ncardeli Sep 30 '10 at 21:22
That does seem to work, thanks for taking a deeper look. Is there any way to do this without having the nodes with children expanded (visually at least)? – rr. Sep 30 '10 at 21:30
After taking a quick look at the internals, unless I'm mistaken it doesn't seem that there is a built in way to register a node with the Tree until the node is rendered...really odd how tightly coupled the rendering is to the loading. – rr. Sep 30 '10 at 22:01
2

I think there's no way, that's just how it works. Take a look at this thread in ExtJs Forum: http://www.sencha.com/forum/showthread.php?50079-2.0-CLOSED-Preload-Children-On-Tree-Doesn-t-Work-More-Than-A-Depth-Of-1 – ncardeli Sep 30 '10 at 22:03
I thought exactly the same thing while taking a look at the source code. – ncardeli Sep 30 '10 at 22:04

ExtJS TreeLoader Issue

1 Answers1