example - Raíz del lector en ExtJS con matriz JSON anidada

extjs xtype grid

Question

Estoy tratando de llenar la grilla con una parte de los datos que estoy tomando de JSON. Por ejemplo (versión shortnen), JSON se ve así:

 {
  "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",
          }
        ],
    },
  ]
}

Para obtener información sobre los discos de machine1 , necesito llegar a los data[0].devices.disk , así que pensé en cambiar la propiedad store.proxy.reader.root como root = ''data[0].devices.disk'' o root = ''data.0.devices.disk'' pero ninguno funcionó. Sé que la manera más fácil es cambiar la respuesta JSON, pero me interesa si puedo completar la cuadrícula sin cambiar el JSON.

Answer 1

Usar ''data [0] .devices.disk'' funcionó para mí. Sin embargo, su JSON de ejemplo estaba un poco desordenado con algunas comas finales.

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
        }
    });
});