ExtJS 4.2.0 loading nested JSON data in grid

Question

I have a script which returns the following JSON

{
   "success":true,
   "code":0,
   "message":"works",
   "data":[
      {
         "name":"connection1",
         "status":1,
         "info":[
            {
               "info1":"abc",
               "info2":"def",
               "info3":"123"
            },
            {
               "info1":"ghi",
               "info2":"jkl",
               "info3":"456"
            }
         ]
      },
      {
         "name":"connection2",
         "status":1,
         "info":[
            {
               "info1":"mno",
               "info2":"pqr",
               "info3":"789"
            }
         ]
      },
      {
         "name":"connection3",
         "status":1,
         "info":[
            {
               "info1":"stu",
               "info2":"vwx",
               "info3":"123"
            }
         ]
      },
      {
         "name":"connection4",
         "status":0,
         "info":[

         ]
      },
      {
         "name":"connection5",
         "status":0,
         "info":[

         ]
      }
   ]
}

Now I want name, status and the info's to be loaded into a grid. So I first defined my data-model:

Ext.define("Data", {
            extend: 'Ext.data.Model',
            fields: ['name', 'status']
        });

then my info-model:

Ext.define("Info", {
            extend: 'Ext.data.Model',
            fields: [
                'info1',
                'info2',
                'info3'
            ],
            belongsTo: 'Data'
        });

and set up my store:

var store = Ext.create('Ext.data.Store', {
            model: "Data",
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'valid/URL.php'
            },
            reader: {
                type: 'json',
                root: 'data'
            }

        });

but my console.debug(store) logs data: items: Array[0]. I tried to add

hasMany: { model: 'Info', name: 'info' }

to my data-model, but then my console.debug(store) logs model: undefined.

Does anyone know where my mistake is? Any help is appreciated.

weeksdev weeksdev · Accepted Answer · 2014-03-07T15:16:53

Here is a fiddle demonstrating the working code

The method to execute to get a corresponding hasMany store is info(): store.data.items[0].info()

Also, in your example the reader is placed improperly. It should be within the proxy definition. I'm not sure if this was just an error when copy/pasting code. Here is the corresponding models and store:

Info Model:

Ext.define("Info", {
            extend: 'Ext.data.Model',
            fields: ['info1', 'info2', 'info3'],
            belongsTo:'Data'
        });

Data Model:

Ext.define("Data", {
            extend: 'Ext.data.Model',
            fields: ['name', 'status'],
            hasMany:{model:'Info',name:'info'}
        });

Store:

var store = Ext.create('Ext.data.Store', {
            model: "Data",
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'data1.json',
                reader: {
                    type: 'json',
                    root: 'data'
                }
            }
        });

And the log for demonstration after load:

store.on('load', function() {
            console.log(store.data.items[0].info());
        })

ExtJS 4.2.0 loading nested JSON data in grid

1 Answers