Loading Nested JSON Data in ExtJS4 TreeGrid

Question

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 Definition:

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

Could you please show us the JSON response and the model definition? — Izhaki

Izhaki Izhaki · Accepted Answer · 2012-06-29T01:37:03

I suspect you might be confusing a simple parent-child relationship with hasMany relationship.

But for your original question. You are returning a node (jane) which is not a leaf, but has no children returned. As your proxy root for Person is People, the children property should also be people.

I believe the following JSON will work for you:

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

Here is a working code:

Model:

Ext.define('BS.model.ItemCategory', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name'     , type: 'string'},
        {name: 'iconCls'  , type: 'string', defaultValue: 'treenode-no-icon'},
        {name: 'leaf'     , type: 'boolean', defaultValue: false},
        {name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
        {name: 'index'     , type: 'int'},        
    ],

    proxy: {
        type: 'direct',

        api: {
            create:  ItemCategories.Create,
            read:    ItemCategories.Read,
            update:  ItemCategories.Update,
            destroy: ItemCategories.Destroy,
        },
    },

});

Store:

Ext.define('BS.store.ItemCategories', {

    extend: 'Ext.data.TreeStore',    
    model: 'BS.model.ItemCategory',

    autoSync: true,

    root: {
        text: 'Root',
        id: 'NULL',
        expanded: true
    },

    clearOnLoad: true,
});

JSON:

"result":{
  "success":true,
  "children":[
     {
        "id":"1",
        "parentId":null,
        "name":"DFM",
        "index":"0",
        "deleted":"0",
        "children":[
           {
              "id":"6",
              "parentId":"1",
              "name":"Studios",
              "index":"0",
              "deleted":"0",
              "loaded":true,
              "leaf":false
           },
           {
              "id":"7",
              "parentId":"1",
              "name":"Equipment",
              "index":"1",
              "deleted":"0",
              "children":[
                 {
                    "id":"18",
                    "parentId":"7",
                    "name":"Cameras",
                    "index":"0",
                    "deleted":"0",
                    "loaded":true,
                    "leaf":false
                 },
                 {
                    "id":"20",
                    "parentId":"7",
                    "name":"Tripods",
                    "index":"1",
                    "deleted":"0",
                    "loaded":true,
                    "leaf":false
                 },
                 {
                    "id":"26",
                    "parentId":"7",
                    "name":"Lighting Kits",
                    "index":"2",
                    "deleted":"0",
                    "loaded":true,
                    "leaf":false
                 }
              ],
              "leaf":false
           }
        ],
        "leaf":false
     },
     {
        "id":"3",
        "parentId":null,
        "name":"3D",
        "index":"2",
        "deleted":"0",
        "loaded":true,
        "leaf":false
     }
  ]
}

Loading Nested JSON Data in ExtJS4 TreeGrid

2 Answers