View Full Version : TreePanel loaded from json

11 Feb 2011, 3:37 PM
What is the best way to load a TreePanel from json which is returned from the server.

I know this is kind of a loaded question but any ideas/help would be greatly appreciated.

I have found some stuff about loading static data i.e:

Is the best option to format the json on the server so that I can just get the json back and insert it into the TreePanel. Seems a little bad because now my server code is bound to my ui code. If this is the best option how to I get the json from the server and insert it into the tree? (I am a newbie and have been struggling with this).

Or is a better option to return the json in a generic way (such that you could make it work with any ui framework), and then try and parse the json into the tree?

If you have any input or have done this before examples help (again I am an ExtJs newbie).

Also if there is a much better way / 'standard' way to do this I am all ears.

Thanks in advance.

12 Feb 2011, 12:33 AM
There is no real standard for tree data, so a 'generic' solution doesn't exist.

Is it really that difficult to have your server return the tree data in JSON format?

If you can't modify your server then you will have to write your own TreeLoader descendant (see ext/examples/tree/xml-tree-loader.html).

12 Feb 2011, 9:31 AM
Its not that difficult and I can return the json formatted so that extjs's treepanel will work ie:

{"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"}

But I wonder if tightly coupling my server code to my ui code is a good idea. Meaning I am using names like 'leaf' and 'cls' which may not apply to other ui frameworks. IE if I ever switched to JQuery (not that I ever would ;) ) I would need to modify the server.

Not that this is huge deal at all but being new to all of this I am just trying to get a feel for 'best practice' in this area.

Again just to make sure I am not confusing anyone, I will always return JSON but should the data definition for the JSON be tied to ExtJs?

Lastly how would I go about getting this json from the server into the TreePanel?
I think below is ok but I do not know how to pull the JSON from the server into something I can set the children property to.
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Autos',
children: // This is where I will need to put the data from the server I think, but how

Thanks again!!!!

17 Aug 2011, 8:01 AM
Bump, I too am curious about this. I have server side code generating the tree JSON, but the root level node doesn't get rendered with

{"treeRoot": "", "children":[…children...]}

Instead it's formatted like

{"treeRoot": […children...]}

It seems "wrong" to go and ask the backend to change their data feed to match my UI, I'd rather find a solution that allows me to format the json so it meets the UI's needs.

(my next issue is how to take this tree grid data and convert it into a flat list grid structure (ideally without hitting the server again), but I'll get to that later)

17 Aug 2011, 8:03 AM
… is there somewhere in my store definition that I can apply formatting to the structure before the store gets consumed by the view?

I figured it might be the reader, but that seems to be much more simplified.