将 JSON 数据加载到 ExtJs 网格中
Posted
技术标签:
【中文标题】将 JSON 数据加载到 ExtJs 网格中【英文标题】：Load JSON data into a ExtJs Grid 【发布时间】：2013-04-17 15:26:39 【问题描述】：我是 ExtJs 的新手，我无法以任何形式将 JSON 数据加载到网格中——无论是内联的还是从静态 JSON 数据文件。非常感谢任何帮助。
只显示空网格 - 没有任何数据。
var Grid1Store = new Ext.data.JsonStore( root: 'users', fields: [ 'id', 'name', 'email' ], autoLoad: true, data: users: [ "id": 1, "name":"John Smith", "email":"jsmith@example.com", "id": 2, "name":"Anna Smith", "email":"asmith@example.com", "id": 3, "name":"Peter Smith", "email":"psmith@example.com", "id": 4, "name":"Tom Smith", "email":"tsmith@example.com", "id": 5, "name":"Andy Smith", "email":"asmith@example.com", "id": 6, "name":"Nick Smith", "email":"nsmith@example.com" ] ); var onReadyFunction = function() var grid = new Ext.grid.GridPanel( renderTo: Ext.getBody(), frame: true, title: 'Database', width:300, store: Grid1Store, columns: [ text: "Id", dataIndex: 'id', text: "Name", dataIndex: 'name', text: "Email", dataIndex: 'email' ] ); Ext.onReady(onReadyFunction);
【问题讨论】：
【参考方案1】：JsonStore 不将 root 作为配置参数。所以在 JsonStore 实例中设置根参数是没有用的。
您的数据也应该是这样才能使其正常工作。
var Grid1Store = new Ext.data.JsonStore(
fields: [ 'id', 'name', 'email' ],
autoLoad: true,
data: [
"id": 1, "name":"John Smith", "email":"jsmith@example.com",
"id": 2, "name":"Anna Smith", "email":"asmith@example.com",
"id": 3, "name":"Peter Smith", "email":"psmith@example.com",
"id": 4, "name":"Tom Smith", "email":"tsmith@example.com",
"id": 5, "name":"Andy Smith", "email":"asmith@example.com",
"id": 6, "name":"Nick Smith", "email":"nsmith@example.com"
]
);
如果您希望 json 结构保持与您提到的相同，以下是一种解决方案。将其保存为不同的文件 - 比如说“data.json”。通过以下方式重新定义您的商店。
var Grid1Store = new Ext.data.JsonStore(
fields: [ 'id', 'name', 'email' ],
autoLoad: true,
proxy:
type:'ajax',
url:'something.json',
reader:
root:'users'
);
这就是您使用“root”的方式 - 作为代理对象的读取器配置属性。
【讨论】：
这里的用户是什么。如何加载数据【参考方案2】：首先，您不需要将 autoLoad 设置为 true，因为您已经指定了数据。 AutoLoad 用于当您使用加载方法时。
在声明 json 对象之前，您可能也不需要“用户：”。您需要的另一件事是 json 阅读器配置。
请参考extjs文档http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.JsonStore
extjs 文档很棒，我一直在使用它们！！
希望对你有帮助
巴兹
【讨论】：
【参考方案3】：您的代码运行良好。您上面提到的代码工作正常。我希望你使用的是 ExtJS3.4 版本。我在我的设置中执行你的代码，它工作正常。
您可能会发现的唯一问题是标题部分不会出现。这是因为您使用的是“文本”配置而不是“标题”配置。更何况你没有指定高度并使用了更少的宽度。
如果这个答案让你满意，请点击^符号给我打分。
请参考下面的代码进行修改。
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\test\Desktop\ext-3.4.0\resources\css\ext-all.css" />
<script type="text/javascript" src="C:\Documents and Settings\test\Desktop\ext-3.4.0\adapter\ext\ext-base.js"></script>
<script type="text/javascript" src="C:\Documents and Settings\test\Desktop\ext-3.4.0\ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
var Grid1Store = new Ext.data.JsonStore(
root: 'users',
fields: [ 'id', 'name', 'email' ],
//autoLoad: true,
data: users: [
"id": 1, "name":"John Smith", "email":"jsmith@example.com",
"id": 2, "name":"Anna Smith", "email":"asmith@example.com",
"id": 3, "name":"Peter Smith", "email":"psmith@example.com",
"id": 4, "name":"Tom Smith", "email":"tsmith@example.com",
"id": 5, "name":"Andy Smith", "email":"asmith@example.com",
"id": 6, "name":"Nick Smith", "email":"nsmith@example.com"
]
);
var onReadyFunction = function()
var grid = new Ext.grid.GridPanel(
renderTo: Ext.getBody(),
frame: true,
title: 'Database',
width:500,
height:600,
store: Grid1Store,
columns: [
header: "Id", dataIndex: 'id',
header: "Name", dataIndex: 'name',
header: "Email", dataIndex: 'email'
]
);
Ext.onReady(onReadyFunction);
</script>
</body>
</html>
【讨论】：
【参考方案4】：看起来你的问题是你定义商店的地方，把它放在你的 onReady 函数中
【讨论】：
以上是关于将 JSON 数据加载到 ExtJs 网格中的主要内容，如果未能解决你的问题，请参考以下文章
在 ExtJS4 TreeGrid 中加载嵌套的 JSON 数据