PDA

View Full Version : [SOLVED] Using a tree loader without a tree panel



zombeerose
28 May 2009, 6:02 PM
Maybe I'm just whack for trying this but I am attempting to use a TreeLoader to help me process a nested tree-like data set. The thing is that all of the data is returned at once so I am setting preloadChildren to true. The problem is that the children never get pre-loaded, only the first level. I don't know what I am doing wrong. The json is correct and used in other areas so I have eliminated that as a problem.

Here is some sample code to visualize:


var L = new Ext.tree.TreeLoader({
preloadChildren: true,
url: '/some/url'
});

var root = new Ext.tree.AsyncTreeNode({
loader: L
});

L.load(root);

Please help

zombeerose
28 May 2009, 8:39 PM
Thanks for moving

zombeerose
29 May 2009, 7:14 AM
I've tried calling loadComplete but I get this error:
el is undefined
http://.../includes/library/extjs/ext/ext-all-debug.js
Line 144


L.load(root, function() {
root.loadComplete();
});

Animal
29 May 2009, 9:52 AM
All the data at once?

Just use straight Ajax, and create a TreeNode from it. Job done.

zombeerose
29 May 2009, 9:57 AM
But then I have to manually process my response and iterate all the data. That is exactly what the TreeLoader can already do for me.

Not trying to be a PITA - simply want to maximize the use of the existing libraries.

zombeerose
29 May 2009, 10:05 AM
To help visualize, here is some sample json:


[{"id":"1","layout":{"region":"center"},"children":[
{"id":"2","layout":{"region":"north"},"html":"--north--","leaf":true,"text":"North child"},
{"id":"3","layout":{"region":"west"},"html":"--west--","leaf":true,"text":"West region"},
{"id":"4","layout":{"region":"center"},"html":"--center--","leaf":true,"text":"Center region"}
],"leaf":false,"text":"Main Border Panel"}]

Animal
29 May 2009, 11:11 AM
You can still use the appropriate methods of a TreeLoader.

Ensure that your config is a valid node config. An Object, not an Array. Its children property is an Array of more node configs:



a = {
"id":"1",
"layout":{"region":"center"},
"children":[
{"id":"2","layout":{"region":"north"},"html":"--north--","leaf":true,"text":"North child"},
{"id":"3","layout":{"region":"west"},"html":"--west--","leaf":true,"text":"West region"},
{"id":"4","layout":{"region":"center"},"html":"--center--","leaf":true,"text":"Center region"}
],
"leaf":false,
"text":"Main Border Panel"
};
var node = new Ext.tree.TreeNode(a);
new Ext.tree.TreeLoader({preloadChildren: true}).doPreload(node);
console.log(node);

zombeerose
29 May 2009, 11:16 AM
Interesting approach - thanks Animal!

zombeerose
1 Jun 2009, 6:27 AM
I got my original example working after a few adjustments so I am posting in case it helps others.



var L = new Ext.tree.TreeLoader({
preloadChildren: true,
url: '/some/url'
});

var root = L.createNode({ text: 'root' });

L.load(root, function(loader, node) {
//node will be the same as root, which doesn't have a children attribute
loader.doPreload(node.firstChild);
});