example of a simple tree w/ in memory array?

[snod0g]

can someone please post an example of a json array with 3 levels of depth and how to load that array into a tree loader without using asynchronous loading of nodes? thanks! ;)

[efege]

something like http://www.extjs.com/forum/showthread.php?t=4595&highlight=json+tree ?

(I'm not sure about the "not asynchronous" part though)

[snod0g]

here's my code, its not working:


//------------------------------------------------------------------------------
var Tree = Ext.tree;

var tree = new Tree.TreePanel('tree-div', {
lines: true,
animate:true,
loader: new Tree.TreeLoader(),
enableDD:false,
containerScroll: true
});

// set the root node
var root = new Tree.TreeNode({

"cls" : "folder",
text: '1st level',
id:'source',
"children" : [
{
"leaf" : false,
"text":"2nd level",
"id":"6",
"children":[ {"text" : "3rd level", "id" : "100000", "leaf" : true, "cls" : "file" } ],
"expanded": true,
"cls":"folder"

}
]
});
tree.setRootNode(root);

// render the tree
tree.render();
root.expand();

[efege]

But it works if instead of


var root = new Tree.TreeNode({

you use


var root = new Tree.AsyncTreeNode({

right?

Please, could someone explain why this happens, and what exactly is an AsyncTreeNode for? Thanks :)

[jsakalos]

AsyncTreeNode (Asynchronous Tree Node) is node with loader which loads children from server when node [+] image is clicked. Once children are loaded they are not loaded again when you close/reopen the node.

[snod0g]

how can i build the json data passed to new Tree.AsyncTreeNode() using a for loop?

[jsakalos]

Hmmm, there is no need to pass any data to AsyncTreeNode. The data is loaded by loader from server.

[snod0g]

i'm not using treeloader with any parameters, im just doing
loader: new Tree.TreeLoader(),

and then i pass the full tree JSON to my root node
var root = new Tree.AsyncTreeNode(json);

[jsakalos]

It seems to me that there some misconcept. The constructor of AsyncTreeNode doesn't take json as argument, but config object. See doc and these links:

http://extjs.com/deploy/ext/examples/tree/reorder.html (http://extjs.com/forum/../deploy/ext/examples/tree/reorder.html)
http://extjs.com/deploy/ext/examples/tree/organizer.html (http://extjs.com/forum/../deploy/ext/examples/tree/organizer.html)

[snod0g]

i have some xml data and i need to loop through it, building up a root node that i can pass to the asynctreenode() constructor


BUT I DONT KNOW HOW :(( :(( :(( :(( :((

[efege]

snod0g, search the forums and you'll find help:

http://extjs.com/forum/showthread.php?t=4843&highlight=xml+json+tree

(and btw, not abusing of bold, uppercase, and smilies makes people want to help you :) )

If that thread does not solve your problem, please post a more detailed description.

[snod0g]

when i try to do this i get just 1 folder and i can't expand it and it has the little loading animated gif next to it


var Tree = Ext.tree;

var tree = new Tree.TreePanel('tree-div', {
lines: true,
animate:true,
loader: new Tree.TreeLoader(),
enableDD:false,
containerScroll: true
});

// set the root node
var root = new Tree.AsyncTreeNode({
"cls" : "folder",
text: '1st level',
id:'source'

});


var node = new Tree.AsyncTreeNode( { "cls" : "folder", text: '2nd level', id: '2ndlevel'});
root.appendChild(node);
// render the tree
tree.setRootNode(root);
tree.render();
root.expand();

[snod0g]

attached is a screenshot. it is auto expanded. clicking the - collapses it but it wont let me expand it again. and it has that perpetual loading gif

here's my current code:


var Tree = Ext.tree;

var tree = new Tree.TreePanel('tree-div', {
lines: true,
animate:true,

enableDD:false,
containerScroll: true
});

// set the root node
var root = new Tree.AsyncTreeNode({
"cls" : "folder",
text: 'Name',
id:'source'

});


var node1 = new Tree.AsyncTreeNode( { "cls" : "file", "leaf" : true, "text": 'First', "id": 'first'});
var node2 = new Tree.AsyncTreeNode( { "cls" : "file", "leaf" : true, "text": 'Last', "id": 'last'});
root.appendChild(node1);
root.appendChild(node2);
// render the tree
tree.setRootNode(root);
tree.render();
root.expand();

[jsakalos]

The reason I have given you those two links is that there you can find WORKING examples of both AsyncTreeNode and TreeNode.

For AsyncTreeNode you need working server that replies with correct data for requests generated by opening nodes.

It seems to me that you have FULL tree available in javascript and you don't want to read each node's children from server.

If this is the case, look at the image organizer example tree part.