Question

让我们从我的商店开始：

var newstore = Ext.create('Ext.data.Store', {
    fields: ['id', 'table_name', 'name', 'description']
    proxy: {
        type: 'memory'
    }               
});

我这里有一些示例数据，来自动态json响应：

{
   "elements":[
      {
         "element":{
            "name":"Element Name", <---- This is the value I need** 
            "id":"Element ID",
            "attributes":[
               {
                  "attrname":"id",
                  "attrvalue":"This is the ID"
               },
               {
                  "attrname":"name",
                  "attrvalue":"This is the name"
               },
               {
                  "attrname":"description",
                  "attrvalue":"This is the description"
               },
               {
                  "attrname":"table_name",
                  "attrvalue":"This is the table"
               }
            ]
         }
      }
   }

我在这里解码我的json，它将它整齐地放入我的商店：

for( var i=0; i < decoded.elements.length; i++ ) {
    var element = decoded.elements[ i ].element;
    var element_name = element.name; <---- THIS retrieves that value I need
    var model = {};  
// loop over attributes
for( var x=0; x < element.attributes.length; x++ ) {
    var attribute = element.attributes[ x ];
    model[ attribute.attrname ] = attribute.attrvalue;
}
    // implicitly cast data as Model
    newstore.add( model ); 
}

最后，我的网格 - ResponseList.js：

var grid = Ext.define('MyApp.view.ResponseList' ,{
    initComponent: function(columns) {
    //config
        this.columns = [ 
            {header: 'Element Name', dataIndex: 'What goes here ???'},
            {header: 'ID', dataIndex: 'id'},
            {header: 'View Name', dataIndex: 'name'}, 
            {header: 'Description', dataIndex: 'description'},
            {header: 'Table Name', dataIndex: 'table_name'}, 
            etc...

我的问题是，如何将第一个名称值 元素名称 放入网格的第一行？名称名称已用于attributes.attrname字段，因此我不确定如何继续。除了元素名称之外的所有内容都显示正常。

[编辑]：这就是我希望网格看起来的样子： enter image description here

感谢任何帮助！

Answer 1

在store或model的字段中，您可以指定允许嵌套json数据的mapping：

var model = Ext.define('myModel', {
            extend: 'Ext.data.Model',
            fields: [{
                name: 'id',
                mapping: 'element.id',
                type: 'auto'
            }],
            proxy: {
                type: 'ajax',
                url: 'data.json',
                reader: {
                    type: 'json',
                    root: 'elements',
                    successProperty: ''
                }
            }
        });
        var store = Ext.create('Ext.data.Store', {
            model: model,
            autoLoad: true,
            listeners: {
                load: function() {
                    console.log(store);
                }
            }
        });
        var grid = Ext.create('Ext.grid.Panel', {
            renderTo:Ext.getBody(),
            store:store,
            columns: {
                defaults: {},
                items: [{
                    header: "Id",
                    dataIndex: "id",
                    hidden: false
                }]
            }
        });

这是fiddle demonstrating working code。

Answer 2

您可以使用网格上的渲染器来获取实际需要的值。

{header: 'Element Name', dataIndex: 'What goes here ???',
    renderer: function(value, metaData, record, row, col, store, gridView){
        return record.someAttribute;
    }
},

我不确定你的唱片的结构，但我想你可以猜到如何从这里开始。

另外，我不认为所有手动解码都是必要的，我无法弄清楚你想要你的网格看起来如何，但如果你发布它的草图或者某些东西，我们可以让所有的解码看起来更干净

检索嵌套的JSON数据 - Ext JS

2 个答案: