ExtJS loading nested JSON data in grid

Question

I have a php-script, which returns the following JSON

[
   {
      "Code":0,
      "Message":"No problem"
   },
   {
      "name":"o016561",
      "status":1,
      "locks":[
         {
            "ztn":"155320",
            "dtn":"20131111",
            "idn":"78"
         },
         {
            "ztn":"155320",
            "dtn":"20131111",
            "idn":"91"
         }
      ]
   },
   {
      "name":"o011111",
      "status":1,
      "locks":[
         {
            "ztn":"155320",
            "dtn":"20131111",
            "idn":"91"
         }
      ]
   },
   {
      "name":"o019999",
      "status":0,
      "locks":[

      ]
   },
   {
      "name":"o020000",
      "status":0,
      "locks":[

      ]
   },
   {
      "name":"o020001",
      "status":0,
      "locks":[

      ]
   }
]

Edit: The grid should look something like this:

a bit smal...

I've been able to load name and status into my grid - so far so good. But the more important part is, that I need the nested data in the locks-array being loaded into my grid, but I just can't get my code working. Any help would be appreciated.

I'm using ExtJS 4.2 if that matters.

Edit 2:

I tried

Ext.define("Locks", {
    extend: 'Ext.data.Model',
    fields: [
        'ztn',
        'dtn',
        'idn'
    ]
});

Ext.define("ConnectionModel", {
    extend: 'Ext.data.Model',
    fields: ['name', 'status'],
    hasMany: [{
        model: 'Locks',
        name: 'locks'
    }]
});

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

but it seemed to be wrong in multiple ways... and it would be awesome if ztn and dtn could be displayed just seperated with a whitespace in the same column

you have an array of items possible in locks however in your grid it shows ztn + dtn, are you wanting to sum all corresponding values from the array into that field? — weeksdev, Mar 05 '14 at 14:00

VDP · Accepted Answer · 2014-03-05T15:44:47.530

You can add a renderer to the column. In that renderer you can do anything with the record...

Here's a working fiddle: http://jsfiddle.net/Vandeplas/MWeGa/3/

Ext.create('Ext.grid.Panel', {
    title: 'test',
    store: store,
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Status',
        dataIndex: 'status'
    }, {
        text: 'idn',
        renderer: function (value, metaData, record, rowIdx, colIdx, store, view) {
            values = [];
            record.locks().each(function(lock){
                values.push(lock.get('idn'));
            });
            return values.join('<br\>');
        }
    }, {
        text: 'ztn + dtn',
        renderer: function (value, metaData, record, rowIdx, colIdx, store, view) {
            values = [];
            record.locks().each(function(lock){
                values.push(lock.get('ztn') + ' ' + lock.get('dtn'));
            });
            return values.join('<br\>');
        }
    }],
    height: 200,
    width: 600,
    renderTo: Ext.getBody()
});

Note

If you have control over your backend you better change the form of your data more like this:

{
    "code": 0,
    "message": "No problem",
    "success": true,
    "data": [
        {
            "name": "o016561",
            "status": 1,
            "locks": [
                {
                    "ztn": "155320",
                    "dtn": "20131111",
                    "idn": "78"
                },
                {
                    "ztn": "155320",
                    "dtn": "20131111",
                    "idn": "91"
                }
            ]
        },
        {
            "name": "o011111",
            "status": 1,
            "locks": [
                {
                    "ztn": "155320",
                    "dtn": "20131111",
                    "idn": "91"
                }
            ]
        }
    ]
}

That way you don't mix your control data (success, message, code,...) with your data and the proxy picks it up correctly (it can be a cause of the problems your experiencing). I added a success boolean => Ext picks it up and goes to the failure handler. It helps a lot with your exception handling.

Here is the proxy for it:

proxy: {
    type: 'ajax',
        api: {
        read: ___URL____
    },
    reader: {
        type: 'json',
        root: 'data',
        messageProperty: 'message'
    }
}

well... some unexpected `Uncaught TypeError: Cannot read property 'Container' of undefined ` appeared. I'm pretty new to ExtJS so what does this mean? — p4b4, Mar 05 '14 at 15:07
in my example? strange.. I can't reproduce it... basically it means: you have an object eg; `a` and you try to do `a.Container` => but `a` is `undefined` so it has no property `Container`.. Most of the time is't due to a missing comma or something stupid... — VDP, Mar 05 '14 at 15:32
if it worked before just revert to that point and insert the 2 columns — VDP, Mar 05 '14 at 15:34
aah it was some n00bish typo mistake... and thanks a lot for the additional answers! — p4b4, Mar 05 '14 at 15:50
@VDPcan you please propose a solution other than using renderer. Cant we do it using dataIndex somehow ? — DockYard, Jun 22 '19 at 19:38
@VDP could you please answer my question at :https://stackoverflow.com/questions/56717427/unable-to-render-data-into-grid-column-using-json-results Its similar to this question, but does not involve using a renderer. Your help would be very much appreciated — DockYard, Jun 22 '19 at 19:47

ExtJS loading nested JSON data in grid

1 Answers1