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