ExtJs扩展之GroupPropertyGrid-优快云博客

本文介绍如何扩展 ExtJs 的 PropertyGrid 组件以支持属性分组功能。通过对 PropertyRecord 添加 Group 字段、使用 GroupingStore 替换 Store 以及调整相关方法，实现了 PropertyGrid 的分组显示。

这几天做一个Web项目，使用了ExtJs，其中有个像设计器一样的界面，选择界面上的内容，可以直接编辑内容的属性，这个原本来说对于使用ExtJs还是很简单的。ExtJs本身就提供了丰富的空间和良好的界面开发，就如同WinForm的开发一样。但是ExtJs的空间也有不完美的地方，但是有缺点也有他自己的弥补方法。ExtJs的良好的扩展性就是ExtJs自己控件不能实现的最好的方法。

这几个中使用最多的当属ExtJs的PropertyGrid，ExtJs的PropertyGrid使用起来时相当简单的，在ExtJs的官方网站上也有相应的例子，简单的就不在叙述了。但是ExtJs本身的PropertyGrid不能支持分组，在显示的不能将属性进行分组，这是相当郁闷的。不知道为什么ExtJs不提供这样的方法和接口。

于是在网上Google了许久，网上也有类似的内容，叫做《扩展组件：GroupingView+ PropertyGrid （蒙牛版）》。楼主写的很好，但是不知道为什么没有将源码贴上。网上也没有其他的好的建议。无奈中，只能自己花点时间去写个吧。于是打开了ExtJs的源代码，找到了PropertyGrid的源文件，一看，还是比较简单的，

其中几个主要内容就是：

PropertyRecord

PropertyStore

PropertyColumnModel

PropertyGrid

于是拷贝了全部的源代码，创建了文件名为Ext.ux.grid.GroupPropertyGrid.js的脚本文件，并测试值，成功通过，开始阅读PropertyGrid的源代码，发现了以下几个问题：

1、PropertyRecord这个种的内容太少了，仅有name和value，

2、PropertyStore使用的是Ext.data.Store，而没有使用Ext.data.GroupingStore

3、PropertyStore使用的数据中不支持分组，并且更新的时候没有对分组进行处理

而PropertyGrid确实继承EditorGridPanel，这个本身就是可以支持Group分组的，这样PropertyGrid中就不需要修改了。

下面就对这几个问题进行修改，让他支持分组：

1、修改PropertyRecord,添加Group字段。

1 Ext.ux.grid.GroupPropertyRecord = Ext.data.Record.create(
2 [{name: " name " ,type: " string " }, " value " , " group " ]
3 );

2、修改PropertyStore以支持GroupingStore

1 Ext.ux.grid.GroupPropertyStore = function(grid, source){
2      this .grid = grid;
3      this .store = new Ext.data.GroupingStore({
4         recordType : Ext.ux.grid.GroupPropertyRecord,
5         groupField : " group "
6     });
7      this .store.on( ' update ' , this .onUpdate,   this );
8      if (source){
9          this .setSource(source);
10     }
11     Ext.ux.grid.GroupPropertyStore.superclass.constructor.call( this );
12 };
13 Ext.extend(Ext.ux.grid.GroupPropertyStore, Ext.util.Observable, {
14     setSource : function(o){
15          this .source = o;
16          this .store.removeAll();
17         var data = [];
18          for (var k in o){
19              if ( this .isEditableValue(o[k])){
20                 data.push( new Ext.ux.grid.GroupPropertyRecord({name: k, value: o[k],group:k},k));
21             }
22              else if ( typeof (o[k]) == ' object ' ){
23                  for (var n in o[k]){
24                     data.push( new Ext.ux.grid.GroupPropertyRecord({name: n, value: o[k][n],group:k},k + " && " + n));
25                 }
26             }
27         }
28          this .store.loadRecords({records: data}, {}, true );
29     },
30
31      // private
32     onUpdate : function(ds, record, type){
33          if (type == Ext.data.Record.EDIT){
34             var v = record.data[ ' value ' ];
35             var oldValue = record.modified[ ' value ' ];
36              if ( this .grid.fireEvent( ' beforepropertychange ' , this .source, record.id, v, oldValue) !== false ){
37                  if (record.id.indexOf( " && " ) !=- 1 )
38                 {
39                     var values = record.id.split( " && " );
40                      this .source[values[ 0 ]][values[ 1 ]] = v;
41                 }
42                  else
43                 {
44                      this .source[record.id] = v;
45                 }
46                 record.commit();
47                  this .grid.fireEvent( ' propertychange ' , this .source, record.id, v, oldValue);
48             } else {
49                 record.reject();
50             }
51         }
52     },
53
54      // private
55     getProperty : function(row){
56         return this .store.getAt(row);
57     },
58
59      // private
60     isEditableValue: function(val){
61          if (Ext.isDate(val)){
62              return true ;
63         } else if ( typeof val == ' object ' || typeof val == ' function ' ){
64              return false ;
65         }
66          return true ;
67     },
68
69      // private
70     setValue : function(prop, value){
71          this .source[prop] = value;
72          this .store.getById(prop). set ( ' value ' , value);
73     },
74
75      // protected - should only be called by the grid.  Use grid.getSource instead.
76     getSource : function(){
77          return this .source;
78     }
79 });

主要修改了SetSource，onUpdate这两个方法，并且修改了Store为GroupingStore。这样在去测试，就成功的可以看到PropertyGrid已经可以分组了。效果图如下：