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

Posted

技术标签:

【中文标题】EXTJS 在异步获取后将 JSONStore 加载到网格【英文标题】:EXTJS Load JSONStore to grid after asynchronous get 【发布时间】: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": [
            ["", "", "", "", "", "", "", "", "", "", "", "", ""],
            ["", "", "", "", "", "", "", "", "", "", "", "", ""]
         ]
    

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

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

【问题讨论】:

【参考方案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.  
      
);

【讨论】:

以上是关于EXTJS 在异步获取后将 JSONStore 加载到网格的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ExtJS 3.4 中添加/合并多个 Ext.data.JsonStore

ExtJS JsonStore 未填充

ExtJS 4.1 - 改变 JsonStore 的值

EXTJS JsonStore 不加载

与 Ext.data.JsonStore 连接的 ExtJS 3 组合框不会在第二次 ++ 单击时打开

使用 extjs 3.4 panel + dataview + jsonstore 检索数据