EXTJS 在异步获取后将 JSONStore 加载到网格答案

【问题标题】：EXTJS Load JSONStore to grid after asynchronous getEXTJS 在异步获取后将 JSONStore 加载到网格
【发布时间】：2011-11-23 16:51:03
【问题描述】：

我有一个 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": [
            ["", "", "", "", "", "", "", "", "", "", "", "", ""],
            ["", "", "", "", "", "", "", "", "", "", "", "", ""]
         ]
    }
}

因为它们很长，所以我把它们取出来了。

对出了什么问题有任何想法吗？

【问题讨论】：

标签： javascript json extjs grid extjs3

【解决方案1】：

由于您使用的是 JsonStore，显然您仍在使用 ExtJS-3（而不是 4），因此以下链接仍然相关：

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

话虽如此，查看您的 JSON，问题在于您指定的根“行”不是顶级级别属性：而是嵌套在“表”内属性。

另见：extJS: reading a nested JSON

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

以下是一些选项：

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

【讨论】：

【解决方案2】：

这是因为商店的加载是异步的。因此，网格首先加载，最后加载存储，您需要网格的数据。

本次讨论可能对您有所帮助：http://www.sencha.com/forum/showthread.php?119836-Store-asynchronous-loading-and-Form-loading/page2

使用回调函数也可能是您的解决方案：

yourStore.load({  
  callback: function() {  
    //here you can be sure that the store is loaded.  
    }  
});

【讨论】：