javascript - EXTJS 异步get后加载JSONStore到grid

Question

我有一个 JSON 存储，我想将其自动加载到 grid.panel 中。不幸的是，在它完成异步获取后，网格中没有填充任何内容。 Firebug 显示 JSON 已成功检索。

商店:

var datasetStore = new Ext.data.JsonStore({
    root: 'rows',
    fields: ['griddap', 'Subset', 'tabledap', 'Make A Graph', 'wms', 'Title', 'Summary', 'Info', 'Background Info', 'RSS', 'Email', 'Institution', 'Dataset ID'],
    proxy: new Ext.data.HttpProxy({
        url: 'http://localhost:8080/proxy.php?u=http://coastwatch.pfeg.noaa.gov/erddap/info/index.json'
        }),
    autoLoad: true
});

网格:

var datasetListingGridPanel = new Ext.grid.GridPanel({
        id: 'datasetListingGridPanel',
        preventHeader: true,
        store: datasetStore,
        layout: 'fit',
        viewConfig: {
            forceFit:true,
            fitcontainer:true
        },
        columns: 
        [
            {
                header: 'Dataset Title', 
                dataIndex: 'Title'
            }
        ]
        });

编辑 - JSON

{
    "table": {
        "columnNames": ["griddap", "Subset", "tabledap", "Make A Graph", "wms", "Title", "Summary", "Info", "Background Info", "RSS", "Email", "Institution", "Dataset ID"],
        "columnTypes": ["String", "String", "String", "String", "String", "String", "String", "String", "String", "String", "String", "String", "String"],
        "rows": [
            ["", "", "", "", "", "", "", "", "", "", "", "", ""],
            ["", "", "", "", "", "", "", "", "", "", "", "", ""]
         ]
    }
}

我取出了值，因为它们很长。

有什么问题吗？

Answer 1

由于您使用的是 JsonStore，很明显您仍在使用 ExtJS-3(而不是 4)，因此以下链接仍然相关:

http://www.sencha.com/learn/grid-faq/

也就是说，查看您的 JSON，问题是您指定的根“行”不是 顶级 级属性:而是嵌套在“表”中属性(property)。

另见:extJS: reading a nested JSON

反过来又引用了这个:http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader

下面是一些选项:

1. 将返回 JSON 的服务器端代码切换为以“行”作为顶级属性返回数据
2. 对数据进行 Ajax 调用，手动解析它，然后将其提供给您的商店
3. 扩展(或寻找现有扩展)必要的 ExtJS 组件(JsonReader？)以便它可以按原样处理数据，但您可能可以将“root”属性指定为“table.rows”