动态生成的元数据不显示网格

Question

以下数据用于动态加载和显示网格。两个网格之间的唯一区别是第一个读取器接收下面的数据，但第二个网格只知道数据，metaData将生成 on苍蝇。我为字段和列放置了存根，因为这不是问题，我还没有决定如何生成数据。

两位读者最终都会将以下数据传递给JsonReader readRecords()＆＃39;函数通过this.callParent([data]);，但第二个不显示数据。数据在那里，但我不确定它为什么不显示？

下面有两个演示链接。第一个是从内存加载的JSFiddle，第二个是通过AJAX加载的Sencha Fiddle。

段

var rawFields = [
    { "name": "year",     "type": "int" },
    { "name": "standard", "type": "string" },
    { "name": "bitRate",  "type": "float" }
];

var rawColumns = [
    { "text" : "Year",     "dataIndex" : "year",     "flex" : 1 },
    { "text" : "Standard", "dataIndex" : "standard", "flex" : 1 },
    { "text" : "Bit/Sec",  "dataIndex" : "bitRate",  "flex" : 1 }
];

Ext.define('Example.reader.DynamicReader', {
    extend : 'Ext.data.reader.Json',
    alias : 'reader.dynamicReader',

    readRecords : function(data) {
        var response = {
            data: data,
            metaData : this.createMetaData(data),
            success: true
        };
        console.log(response);
        return this.callParent([response]);
    },

    createMetaData : function(data) {
        return {
            idProperty : "id",
            fields : rawFields,  // These will eventually be generated...
            columns : rawColumns // These will eventually be generated...
        };
    }
});

数据

{
    "data": [
        {
            "id": 0,
            "year": 1997,
            "standard": "802.11",
            "bitRate": 2000000
        },
        {
            "id": 1,
            "year": 1999,
            "standard": "802.11b",
            "bitRate": 11000000
        },
        {
            "id": 2,
            "year": 1999,
            "standard": "802.11a",
            "bitRate": 54000000
        },
        {
            "id": 3,
            "year": 2003,
            "standard": "802.11g",
            "bitRate": 54000000
        },
        {
            "id": 4,
            "year": 2007,
            "standard": "802.11n",
            "bitRate": 600000000
        },
        {
            "id": 5,
            "year": 2012,
            "standard": "802.11ac",
            "bitRate": 1000000000
        }
    ],
    "metaData": {
        "idProperty": "id",
        "fields": [
            {
                "name": "year",
                "type": "int"
            },
            {
                "name": "standard",
                "type": "string"
            },
            {
                "name": "bitRate",
                "type": "float"
            }
        ],
        "columns": [
            {
                "text": "Year",
                "dataIndex": "year",
                "flex": 1
            },
            {
                "text": "Standard",
                "dataIndex": "standard",
                "flex": 1
            },
            {
                "text": "Bit/Sec",
                "dataIndex": "bitRate",
                "flex": 1
            }
        ],
        "success": true
    }
} 

演示

以下示例都实现了相同的功能，因此唯一的区别是加载数据。

从内存加载

http://jsfiddle.net/MrPolywhirl/zy4z5z8a/

从AJAX加载

https://fiddle.sencha.com/#fiddle/d3l

Answer 1

我想出了答案。我需要为阅读器指定一个根值，以便正确映射数据。

Ext.onReady(function() {
    Ext.widget("dynamicGrid", {
        title: 'WiFi LAN Data Rates [Dynamic]',
        renderTo: Ext.get('example-grid-dynamic'),
        readerType: 'dynamicReader',
        // This need to match the 'data' key specified in the `response` object
        // that was created in readRecords().
        readerRoot: 'data',
        data : rawData
    });
});

root的文档指出root属性必须映射到响应的数据部分。

Json.root的文档：

  

Ext.data.reader.Json.root

     

root：String

     

属性的名称，其中包含与为其配置此Reader的模型对应的数据项。对于JSON阅读器，它是属性名称（如果根目录是嵌套的，则是以点分隔的属性名称列表）。对于XML阅读器，它是一个CSS选择器。对于数组读取器，根不适用，因为假定数据是单级数组数组。