在PropertyGrid使用JsonStore

前端之家收集整理的这篇文章主要介绍了在PropertyGrid使用JsonStore前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在浏览数篇的帖子后,我花了不少时间去理解,终天有些粗浅的认识,我在这里与大家分享

设置HTML
复制以下的内容到HTML文件

01. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
02. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
03. <head>
04. <Meta http-equiv="content-type" content="text/html; charset=utf-8" />
05. <title>Ext.PropertyGrid with JsonStore</title>
06. <link type="text/css" rel="stylesheet" media="all" href="lib/ext-2.2/resources/css/ext-all.css" />
07. <script type="text/javascript" src="lib/ext-2.2/adapter/ext/ext-base.js"></script>
08. <script type="text/javascript" src="lib/ext-2.2/ext-all-debug.js"></script>
09. </head>
10. <body>
11.
12. <div id="grid-ct"></div>
13.
14. </body>
15. </html>
非常简单的页面,当中一div元素是为Property Grid渲染所做好准备,现在我们设定JavaScript……

设置JavaScript
把以下内容复制到script标签,或外置的(js)文件

01. Ext.onReady(function(){
02.
03. var propertyGrid = new Ext.grid.PropertyGrid({
04. title: 'Properties Grid',
05. id: 'propGrid',
06. autoHeight: true,
07. width: 300,
08. renderTo: 'grid-ct',
09. source: {} // 初始化数据源的配置对象
10. });
11.
12. var propertyStore = new Ext.data.JsonStore({
13. autoLoad: true,//自动加载数据
14. url: 'getproperties.PHP',
15. root: 'props',
16. fields: ['First name','Last name','E-mail'],
17. listeners: {
18. load: {
19. fn: function(store,records,options){
20. // 获取propety grid组件
21. var propGrid = Ext.getCmp('propGrid');
22. // 保证property grid是存在的
23. if (propGrid) {
24. // 获得property grid 的store数据
25. propGrid.setSource(store.getAt(0).data);
26. }
27. }
28. }
29. }
30. });
31. });
Ext.onReady事件一触发,以上脚本就创建PropereyGrid和JsonStore两个对象,后者用于提供数据源。或许你会从Complex布局(layout)中的例子中见识过Property Grid的代码,这里的源码和例子的基本一致,除了配置项对象和id就有改变。在该例子中,配置项对象在初始化的时候还未设置。

JsonStore设置为自动加载数据(antoload:true),并加入“load”事件,原理是数据加载后立即传递到Property。有不同的方式方法从JsonStore加载数据,但似乎这是一种比较“懒”的方式。

到此我们完成了脚本部份的设置,以下则是后台方面的……

设置后台
为了让数据可被正确地读取,必须以特定恰当的方式变换之。

就以当前服务端生成的JSON文本为例子,说明是如何输进JSON的:

1. {"props":[
2. {
3. "First name":"John",
4. "Last name":"Smith",
5. "E-mail":"jsmith@smith.com"
6. }
7. ]}
正如所见,单单一个对象(object)它就包含一数组在内。通常的时候,像Grid Panel的组件其数据对象是由多个记录组成一个数组的,但这里因为是Proerty Grid的原因只有一个记录在数组中。

也应该如此了。当页面进行加载,数据将被载入Store对象,并传达到Properey Grid组件,只要后台设置无误就行。本文件的例子也可超松地配置为其它类型的Store。

Author: Ry Racherbaumer(译者:Frank Cheung) Recived from "http://extjs.com/learn/Tutorial:PropertyGrid_with_JsonStore_%28Chinese%29":

猜你在找的Json相关文章