-
19 Nov 2012 5:47 AM #1Sencha Premium Member
- Join Date
- Mar 2012
- Posts
- 15
- Vote Rating
- 0
treeStore with recursive data
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?
-
21 Nov 2012 7:17 AM #2Sencha - Senior Forum Manager
- Join Date
- Mar 2007
- Location
- St. Louis, MO
- Posts
- 33,684
- Vote Rating
- 435
If you change your JSON to be like:
Then model and store: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" : [ ] } ]
And the test NestedList: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' } } } });
Code:Ext.Viewport.add({ xtype : 'nestedlist', displayField : 'Name', store : new MyApp.store.Categories() });Mitchell Simoens @SenchaMitch
Sencha Inc, Senior Forum Manager
________________
http://www.JSONPLint.com - Source to lint your JSONP!
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
https://github.com/mitchellsimoens
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services services@sencha.com
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is almost in print!
When posting code, please use BBCode's CODE tags.
-
21 Nov 2012 7:22 AM #3Sencha Premium Member
- Join Date
- Mar 2012
- Posts
- 15
- Vote Rating
- 0
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?
-
21 Nov 2012 7:48 PM #4Sencha Premium Member
- Join Date
- Jan 2008
- Location
- Upstate NY
- Posts
- 199
- Vote Rating
- 25
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?
BriceBrice Mason
Front End Developer
Modus Create
@bricemason
bricemason.com
Sencha Touch Screencasts
Vimeo - Sencha Touch Channel
Github Projects:
Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.
Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.
Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.
-
23 Nov 2012 2:09 AM #5Sencha Premium Member
- Join Date
- Mar 2012
- Posts
- 15
- Vote Rating
- 0
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 });
-
27 Nov 2012 5:42 AM #6Sencha Premium Member
- Join Date
- Mar 2012
- Posts
- 15
- Vote Rating
- 0
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:
This is the nestedList store: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 });
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');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' } } } });
-
27 Nov 2012 11:57 AM #7Sencha User
- Join Date
- Oct 2012
- Location
- Belo Horizonte, Brazil
- Posts
- 5
- Vote Rating
- 0
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
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.Code:... var myView = {xtype: 'myview'}; Ext.Viewport.add (MyView); ...
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:
can anyone help me?Code:Ext.Viewport.add ({ xtype 'nestedlist' displayField: 'Name', store: new MyApp.store.Categories () });
Reply With Quote
