How do I show nested data into a tree?

I am facing the same task, and first was glad to run into your post! After 5 hours of exploring the official docs regarding to it:

• http://docs.sencha.com/ext-js/4-0/#!/guide/data
• http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader

I was able to populate my nested treestore with nothing better than this:

(in my case the main model is Camgroup which hasMany Camera as 'cams': which allows to use .cams() for every group)

Ext.define('AV.store.sCamgroups', { extend: 'Ext.data.TreeStore', model: 'AV.model.Camgroup', autoLoad: true, root: { expanded: true, text: "Grouped Cameras" }, proxy: { type: 'ajax', url: 'data/camgroups.json', reader: { type: 'json', root: 'camgroups', successProperty: 'success' } }, listeners: { load: function(thisStore, rootnode, records, successful, eOpts){ records.forEach(function(group){ group.cams().each(function(cam) { group.appendChild({ text: cam.get('name'), leaf: true }); }); }); } } }); 

camgroups.json returns smth like this:

{ success: true, camgroups: [{ "id" : "group1", "name" : "Exterior cams", "cams" : [{ "id" : "cam3", "name" : "Camera three", "url" : "...", "img" : "images/cams/3.png", "ratio" : 1.33 },{ "id" : "cam4", "name" : "Camera four", "url" : "...", "img" : "images/cams/4.png", "ratio" : 1.33 }] }] } 

Hope this will help you though keep looking for a better solution (prob defining a proper reader).

Again, in "Ext.data.reader.Reader" I can see that Reader has config property 'implicitIncludes' which is supposed 'to automatically parse models nested within other models in a response object', but I cannot make it working =(

Cheers, Ilya

Further progress. Please see at http://www.sencha.com/forum/showthread.php?153986-Empty-column-something-I-can-t-get-with-Ext.data.TreeStore-and-or-Ext.tree.Panel

I appreciate any further advise.

I made some progress. It seems I need to modify my json:

{ "children": [ <<<<---- use the same string to insert nested data, see below too { "id": 12, "name": "Ed2", "children": [] <<<<---- need this line, otherwise, JS tries to load subnodes for ever }, { "id": 123, "name": "Ed", "children": [ <<<<---- as above { "id": 50, "total": 100, "info" : "hello", "name" : "ciao", "children": [ <<<<---- as above { "id" : 20, "price" : 40, "quantity": 2, "children" : { <<<<---- as above "id": 1000, "name": "MacBook Pro", "children": [] <<<<---- as above bis } }, { "id" : 21, "price" : 20, "quantity": 3, "children" : { <<<<---- as above "id": 1001, "name": "iPhone", "children": [] <<<<---- as above bis } } ] } ] } ] 

}

Then the following definition of a model works:

Ext.define("User", { extend: 'Ext.data.Model', fields: [ 'id', 'name', 'info', 'price', 'quantity', 'order_id', 'product_id' ], proxy: { type: 'ajax', //rest url : 'ex1.json', reader: { type: 'json', root: 'children' } } 

});

So, it seems that associations among models for the different levels of my nested data are not needed at all.

It works, although I am not sure whether there are drawbacks or not. I am still looking for your advise, I go by try&mistake, I do not see the underlying logic yet. Thks.

I have second thoughts. The trick to use a unique string 'children' does not seem so good. Let me consider a very simple json:

{ "users": [ { "id": 12, "name": "Ed2", "orders": [] }, { "id": 123, "name": "Ed", "orders": [ { "id": 50, "info" : "hello", "name" : "MM", "leaf" : 'true', "some_else": [] }] } ] 

}

The extJS tree I wish to get is:

Root |--ED |--ED2 |--MM 

The model is just

Ext.define("User", { extend: 'Ext.data.Model', fields: [ 'id', 'name' ], hasMany: {model: 'Order', name: 'orders'}, proxy: { type: 'ajax', //rest url : 'my_file.json', reader: { type: 'json', root: 'users' } } }); Ext.define("Order", { extend: 'Ext.data.Model', fields: [ 'id', 'name', 'info' ], belongsTo: 'User' }); 

The final output I get is just:

Root |--ED |--ED2 

is it a mistake of mine, or a missing feature? is there a way out without to change my json?

Thanks a lot