extjs - Reader root in ExtJS with nested JSON array

Question

I'm trying to fill the grid with part of data i'm taking from JSON. For example (shortnen version), JSON looks like this:

 {
  "data": [
    {
      "name": "machine1",
      "devices": {
        "disk": [
          {
            "type": "file",
            "device": "disk",
          },
          {
            "type": "block",
            "device": "cdrom",
          }
        ],
      },
    },
    {
      "name": "machine2",
      "devices": {
        "disk": [
          {
            "type": "file",
            "device": "disk",
          },
          {
            "type": "block",
            "device": "cdrom",
          }
        ],
    },
  ]
}

To get info about machine1's disks i need to get to data[0].devices.disk, so i thought about changing store.proxy.reader.root property like root = 'data[0].devices.disk' or root = 'data.0.devices.disk' but both didn't work. I know the easiest way is to change the JSON response, but i'm interested if i am able to fill the grid without changing the JSON.

Answer 1

使用 'data[0].devices.disk' 对我有用。尽管有一些尾随逗号，但您的示例 JSON 有点混乱。

jsFiddle

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['type', 'device']
});

Ext.onReady(function() {
    var myData = '{"data":[{"name":"machine1","devices":{"disk":[{"type":"file","device":"disk"},{"type":"block","device":"cdrom"}]}},{"name":"machine2","devices":{"disk":[{"type":"file","device":"disk"},{"type":"block","device":"cdrom"}]}}]}';

    var store = Ext.create('Ext.data.Store', {
        model: 'User',
        data: Ext.decode(myData),
        proxy: {
            type:'memory',
            reader: {
                type:'json',
                root: 'data[0].devices.disk'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        collapsible: true,
        multiSelect: true,
        stateId: 'stateGrid',
        columns: [
            {
                text     : 'type',
                dataIndex: 'type'
            },
            {
                text     : 'device',
                dataIndex: 'device'
            }
        ],
        height: 350,
        width: 600,
        title: 'Array Grid',
        renderTo: 'grid',
        viewConfig: {
            stripeRows: true,
            enableTextSelection: true
        }
    });
});