在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":

在PropertyGrid使用JsonStore

相关文章