Creating Ext.tree.TreePanel from static JSON data in one shot

[Nick]

Here's an example of an Ext tree that is created from inline (static) JSON data in one shot. This may be useful if you are not building nodes dynamically and have all the tree node data within your code. Example uses the Ext 1.0 Beta 2 library.

Example here.
Please view-source for the code.
http://www.mixolution.com/extjs/examples/staticTree.html

[JeffHowden]

You can also take advantage of an AsyncTreeNode as your root and specify the children inline making the loop at the bottom unnecessary. I've put together something for the examples that does just that. If you have no objections, I'd be glad to add it to the examples for others to learn from.

[Joe]

I really like the fact that static data was used in his example and thank you for posting.

I was having a heck of a time with Aync and got the following code working based on your code and the info from JeffHowden. Is this correct or am I doing it 'bass-ackwards'?

    var Tree = Ext.tree;

    var tree = new Tree.TreePanel('tree', {
        animate:true,
        enableDD:false,
	loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
	lines: true,
	selModel: new Ext.tree.MultiSelectionModel(),
        containerScroll: false
    });


    // json data describing the tree
	var json = 
[ 
 {"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [ 
    {"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : 
        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
        ]
    },
    {"text" : "TT", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : 
        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
        ]
    }]
 },
 {"text" : "Cadillac", "id" : 300, "leaf" : false, "cls" : "folder", "children" : [ 
    {"text" : "CTS", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : 
        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
        ]
    },
    {"text" : "CTS-V", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : 
        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
        ]
    }]
 }

];

    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: 'Autos',
        draggable:false,
        id:'source',
        children: json
    });

    tree.setRootNode(root);

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

[Nick]

That looks great to me. I updated the original example to avoid the FOR loop.
Updated example here
http://www.mixolution.com/extjs/exam...ticTree02.html

Thanks. If there are other, better ways to do it. Please post!

[efege]

While playing with your updated example, and comparing its behavior on my local server, I noticed the following problem: if I want to select two nodes with the same text on different folders, I can do it in your original online example (which is using ext-1.0-beta2), but not on my machine (using ext-1.0).

The screenshots illustrate the problem. In both cases, I tried to select all the 10 leaves. The unselected leaves in the 2nd tree simply couldn't be selected.

Not that this is important to me right now... but anyway I'm reporting the different behavior, and waiting for someone else to confirm or clarify.

EDIT: now I see that the pairs of nodes that I couldn't select simultaneously are sharing the same id attribute. So may be this is the right behavior after all...

[Animal]

Only that doesn't load ALL the nodes. It expands the root node, but the subnodes are not rendered. Look in Firebug.

You'd have to do

    root.expand(true);
    root.collapse(true);
    root.expand()

To ensure all nodes are rendered, and finish with just the primary nodes visible.

[efege]

Sorry Animal... I don't see how your reply is related to the multiple selection problem I reported above... Probably my message was not clear enough?

[Animal]

OK, I was replying to Nick. Just to inform him how AsyncTreeNode works. It doesn't load child nodes until you expand the parent.

[moloth]

So if i was producing a php file to spit this all out say json-data.php how would you go about loading it only once? Through a data store or something else?

[mscdex]

So if i was producing a php file to spit this all out say json-data.php how would you go about loading it only once? Through a data store or something else?

I'm also curious if this is possible