在PropertyGrid使用JsonStore

最新推荐文章于 2022-06-10 21:49:42 发布

冷月宫主

最新推荐文章于 2022-06-10 21:49:42 发布

阅读量1k

点赞数

分类专栏： EXT javascript 文章标签： stylesheet javascript properties function xhtml html

javascript 同时被 2 个专栏收录

311 篇文章

订阅专栏

EXT

192 篇文章

订阅专栏

本文介绍如何使用ExtJS的PropertyGrid结合JsonStore来展示动态数据。通过配置HTML页面和JavaScript脚本来实现数据的加载与展示。同时，详细解释了JsonStore的数据格式及其与PropertyGrid的交互过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

设置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.
   ]}