PDA

View Full Version : Loading Nested JSON Data in ExtJS4 TreeGrid



babyangel
29 Jun 2012, 6:26 AM
I'm trying to load nested JSONData into my tree grid. On the first call to get data, all the data needed to populate the grid is returned in the response as a JSON Object. However I can see that it still tries fetch data for all the parent objects in the grid.
Even after the spurious GETs, it is still unable to populate the child Nodes.

I've defined 2 models, the parent with a "hasMany" relationship referring to the child model, and the child node with "BelongsTo" relationship referring to the parent model
I'm using an Ajax Proxy with a JSON reader.

Searching the web I can't find much information and I've used the user-orderitems-products example in the extJS documentation to try and set up the my models and tree.

I'm not entirely sure what I'm missing. Any assistance would be much appreciated.
JSON (person may or may not have children objects):




People: {
{firstName: john, id:123, uniqueID:1231, leaf:true},
{firstName: jane, id:124, uniqueID:1240,
offspring:[
{firstName: adam, id:124, uniqueID:1241, leaf:true},
{firstName: brandon, id:124, uniqueID:1242, leaf:true},
{firstName: claire, id:1243, uniqueID:1243, leaf:true}
]}
}


Model:



Ext.define('Person',{
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type:'string'},
{name: 'uniqueID', type:'float'}
hasMany: {
model:'Offspring',
name: 'Offspring',
associationKey: 'offspring',
primaryKey: 'uniqueID',
foreignKey: 'id'
}
],
proxy: {
type: 'rest',
url: 'http://blah/blah',
reader: {
type: 'json',
root: 'People'
}

}
});

Ext.define('Offspring',{
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type:'string'},
{name: 'uniqueID', type:'float'}
],
belongsTo: 'Person'
});
Store:



var store = Ext.create('Ext.data.TreeStore', {
model: 'Person',
folderSort: true
}

mankz
29 Jun 2012, 6:59 AM
Try to format your response as the TreeStore wants it by default:



[
{firstName: john, id:123, uniqueID:1231, leaf:true},
{firstName: jane, id:124, uniqueID:1240,
children:[
{firstName: adam, id:124, uniqueID:1241, leaf:true},
{firstName: brandon, id:124, uniqueID:1242, leaf:true},
{firstName: claire, id:1243, uniqueID:1243, leaf:true}
]
}
]

More details about using TreePanel and store here: http://docs.sencha.com/ext-js/4-1/#!/guide/tree

babyangel
29 Jun 2012, 7:14 AM
Even when I format it such that "OffSpring" is substituted for "children" I get a node is undefined error when it tries to do oldParent = node.parentNode in the applyChild method.

babyangel
17 Jul 2012, 5:09 AM
answered: http://stackoverflow.com/questions/11234945/loading-nested-json-data-in-extjs4-treegrid