2013-03-20 102 views
1

我想填充网格与我从JSON采取的部分数据。例如(shortnen版),JSON看起来是这样的:ExtJS阅读器根与嵌套的JSON数组

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

要获得有关machine1的磁盘我需要去data[0].devices.disk信息,所以我想过改变store.proxy.reader.root财产像root = 'data[0].devices.disk'root = 'data.0.devices.disk',但两人都没有工作。 我知道最简单的方法是更改​​JSON响应,但我感兴趣的是如果我能够在不更改JSON的情况下填充网格。

+0

哪些数据您试图提取,一个什么样的名单? – 2013-03-20 12:29:14

+0

我想要获取网格,哪些行是数组“磁盘”的元素,列是“类型”和“设备”。 – Luixo 2013-03-20 12:52:10

回答

2

使用'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 
     } 
    }); 
});