这几天做一个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已经可以分组了。效果图如下：
这样整个工作就完成了。
全部的源代码下载：/Files/zhjp11/GroupPropertyGrid.rar
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。