treeStore with recursive data

Hi,
I have a json like this:

Code:

{ "Categories": [ { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 7, "InternalName": "items", "Name": "" }, "children": [ { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 2, "InternalName": "CASE Corporate", "Name": "Corporate" }, "children": [ { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 10, "InternalName": "test1", "Name": "test1" }, "children": [ { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 12, "InternalName": "subsub", "Name": "subsub1" }, "children": [ ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 16, "InternalName": "nvcxhgfx", "Name": "nvcxhgfx" }, "children": [ ] } ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 11, "InternalName": "test12a", "Name": "test12en" }, "children": [ ] } ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 3, "InternalName": "Job Site", "Name": "Job report" }, "children": [ { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 17, "InternalName": "nvcxhgfxggg", "Name": "nvcxhgfx" }, "children": [ ] } ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 4, "InternalName": "CASE Dealers", "Name": "Dealers" }, "children": [ ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 5, "InternalName": "Events", "Name": "Events" }, "children": [ ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 6, "InternalName": "Show", "Name": "Shows" }, "children": [ ] } ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 8, "InternalName": "management", "Name": "" }, "children": [ ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 9, "InternalName": "multimedia", "Name": "" }, "children": [ ] } ] }

where I have a nested structure of objects compose of item and children, each children is a collection of item and children as well.

I set up the store like this

Code:

Code:

Ext.define('MyApp.store.Categories', { extend: 'Ext.data.TreeStore', alias: 'store.categoriesStore', requires: [ 'MyApp.model.CategoryTree' ], config: { model: 'MyApp.model.CategoryTree', storeId: 'categoriesStore', nodeParam: 'children', proxy: { type: 'ajax', url: 'http://domain/Presskit/front/api/category/GetAllCategories', reader: { type: 'json', rootProperty: 'Categories' } } } });

and the models like this:

Code:

Code:

Ext.define('MyApp.model.CategoryTree', { extend: 'Ext.data.Model', uses: [ 'MyApp.model.Category' ], config: { hasMany: { associationKey: 'children', model: 'MyApp.model.CategoryTree', autoLoad: true, name: 'children' }, hasOne: { associationKey: 'item', model: 'MyApp.model.Category' } } }); Ext.define('MyApp.model.Category', { extend: 'Ext.data.Model', uses: [ 'MyApp.model.CategoryTree' ], config: { fields: [ { name: 'Name' }, { name: 'InternalName' }, { name: 'Id' }, { name: 'Media' }, { name: 'ItemCount' }, { name: 'Description' } ], belongsTo: { model: 'MyApp.model.CategoryTree', primaryKey: 'Id' } } });

But it doesn't seam to work properly.
What is the correct implementation for the model?

If you change your JSON to be like:

Code:

[ { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 7, "InternalName" : "items", "Name" : "", "children" : [ { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 2, "InternalName" : "CASE Corporate", "Name" : "Corporate", "children" : [ { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 10, "InternalName" : "test1", "Name" : "test1", "children" : [ { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 12, "InternalName" : "subsub", "Name" : "subsub1", "children" : [ ] }, { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 16, "InternalName" : "nvcxhgfx", "Name" : "nvcxhgfx", "children" : [ ] } ] }, { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 11, "InternalName" : "test12a", "Name" : "test12en", "children" : [ ] } ] }, { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 3, "InternalName" : "Job Site", "Name" : "Job report", "children" : [ { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 17, "InternalName" : "nvcxhgfxggg", "Name" : "nvcxhgfx", "children" : [ ] } ] }, { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 4, "InternalName" : "CASE Dealers", "Name" : "Dealers", "children" : [ ] }, { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 5, "InternalName" : "Events", "Name" : "Events", "children" : [ ] }, { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 6, "InternalName" : "Show", "Name" : "Shows", "children" : [ ] } ] }, { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 8, "InternalName" : "management", "Name" : "", "children" : [ ] }, { "Description" : "", "Media" : null, "ItemCount" : 0, "Id" : 9, "InternalName" : "multimedia", "Name" : "", "children" : [ ] } ]

Then model and store:

Code:

Ext.define('MyApp.model.Category', { extend : 'Ext.data.Model', config : { fields : [ { name : 'Name' }, { name : 'InternalName' }, { name : 'Id' }, { name : 'Media' }, { name : 'ItemCount' }, { name : 'Description' } ] } }); Ext.define('MyApp.store.Categories', { extend : 'Ext.data.TreeStore', alias : 'store.categoriesStore', config : { model : 'MyApp.model.Category', storeId : 'categoriesStore', nodeParam : 'children', proxy : { type : 'ajax', url : 'data/json.json', reader : { type : 'json' } } } });

And the test NestedList:

Code:

Ext.Viewport.add({ xtype : 'nestedlist', displayField : 'Name', store : new MyApp.store.Categories() });

Thanks for your reply.
I saw that all nested list sample use your kind of data structure.
Since the json comes from a service that I can't modify there is no other way to do it?

You could create your own facade in your backend code which pulls data from this service and modifies it to your liking. What about that?

Brice

Ok, I was able to make it work.
Now I have one more question:
is it possible to assign a node (in my case "children") to a new store for a different nested list, I tried this but didn't work:

Code:

store.load({ params:{ Token: token, Language:languageId, CategoryName:"items" }, callback: function(records, operation, success) { var response = records && records[0]; if (response) { Ext.Array.each(records, function(name, index, countriesItSelf) { var internalName = name.data.InternalName; //console.log(internalName); switch (internalName) { case "items": var ItemsCategory = Ext.getStore('ItemsCategory'); var children = name.data; ItemsCategory.root = children; //var list = Ext.getCmp('categoryList'); //list.store = ItemsCategory; break; case "management": //todo break; case "multimedia": //todo break; } }); this.getFiltrableProperties(); } }, scope: this });

ok, I was able to get some result but not quite what I was expecting

I'm calling a services that return e treestore structure. When it loads I want to set one node as a source of a nested list:

Code:

var store = Ext.getStore('AllCategories'); var languageId = selectedLanguage.data.Id; store.load({ params:{ Token: token, Language:languageId }, callback: function(records, operation, success) { var response = records && records[0]; if (response) { Ext.Array.each(records, function(name, index, countriesItSelf) { var internalName = name.data.InternalName; //console.log(internalName); switch (internalName) { case "items": var ItemsCategory = Ext.getStore('ItemsCategory'); var children = name.data; ItemsCategory.setRoot(children); //var list = Ext.getCmp('categoryList'); //list.store = ItemsCategory; break; case "management": // break; case "multimedia": // break; } }); this.getFiltrableProperties(); } }, scope: this });

This is the nestedList store:

Code:

Ext.define('MyApp.store.ItemsCategory', { extend: 'Ext.data.TreeStore', alias: 'store.ItemsCategory', requires: [ 'MyApp.model.Category' ], config: { model: 'MyApp.model.Category', storeId: 'ItemsCategory', rootVisible: false, proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'children' } } } });

it works, but the list is presented with a back button that takes you to the root of the original data, basically to Ext.getStore('AllCategories');

I made this example and really works. Thank you, but my application is MVC, in defining store, model and TreeStore and load the view with

Code:

... var myView = {xtype: 'myview'}; Ext.Viewport.add (MyView); ...

the view is displayed with all items and is navigable but the items do not carry the value in the Name property of the object.

When I load the view same as in the example, using same JSON file same model and same store carries the names and values contained in Name are loaded into TreeView:

Code:

Ext.Viewport.add ({ xtype 'nestedlist' displayField: 'Name', store: new MyApp.store.Categories () });

can anyone help me?