教程:在PropertyGrid使用JsonStore

Posted 周一, 05/25/2009 - 09:31 by admin

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

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

<!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.PropertyGrid with 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）文件。

Ext.onReady(function(){

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

    var propertyStore = 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组件
                    var propGrid = 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的：

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

  • 要发表评论，请先登录