views:

45

answers:

1

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.

+2  A: 

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
    }]

}]

ncardeli
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
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
Could you post sample code and a sample server response with the nodes? Thanks.
ncardeli
Done, though comments strip the lines. The server response is what you gave as the sample JSON string.
rr
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
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
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
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
I thought exactly the same thing while taking a look at the source code.
ncardeli
Thanks for the link
rr