在PropertyGrid使用JsonStore

来源：互联网发布：抽烟咳嗽知乎编辑：程序博客网时间：2024/05/16 09:57

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

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

view source
print?
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">
<head>
       <meta http-equiv="content-type"content="text/html; charset=utf-8"/>
       <title>Ext.PropertyGridwith JsonStore</title>
       <link type="text/css"rel="stylesheet" media="all" href="lib/ext-2.2/resources/css/ext-all.css"/>
       <script type="text/javascript"src="lib/ext-2.2/adapter/ext/ext-base.js"></script>
       <script type="text/javascript"src="lib/ext-2.2/ext-all-debug.js"></script>
</head>
<body>

       <div id="grid-ct"></div>

</body>
</html>

非常简单的页面，当中一div元素是为Property Grid渲染所做好准备，现在我们设定JavaScript……

设置JavaScript
把以下内容复制到script标签，或外置的（js）文件。

view source
print?
Ext.onReady(function(){

   varpropertyGrid = new Ext.grid.PropertyGrid({
       title:'Properties Grid',
       id:'propGrid',
       autoHeight:true,
       width: 300,
       renderTo:'grid-ct',
       source: {}// 初始化数据源的配置对象
   });

   varpropertyStore = new Ext.data.JsonStore({
       autoLoad:true,  //自动加载数据
       url:'getproperties.php',
       root:'props',
       fields: ['First name','Last name', 'E-mail'],
       listeners: {
           load: {
               fn:function(store, records, options){
                   // 获取propety grid组件
                   varpropGrid = Ext.getCmp('propGrid');
                   // 保证property grid是存在的
                   if(propGrid) {
                       // 获得property grid 的store数据
                       propGrid.setSource(store.getAt(0).data);
                   }
               }
           }
       }
   });
});

Ext.onReady事件一触发，以上脚本就创建PropereyGrid和JsonStore两个对象，后者用于提供数据源。或许你会从Complex布局（layout）中的例子中见识过Property Grid的代码，这里的源码和例子的基本一致，除了配置项对象和id就有改变。在该例子中，配置项对象在初始化的时候还未设置。

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

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

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

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

view source
print?
{"props":[
   {
       "First name":"John",
       "Last name":"Smith",
       "E-mail":"jsmith@smith.com"
   }
]}

正如所见，单单一个对象（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":