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字段。
Ext.ux.grid.GroupPropertyRecord=Ext.data.Record.create(
[{name:"name",type:"string"},"value","group"]
);
2、修改PropertyStore以支持GroupingStore
Ext.ux.grid.GroupPropertyStore = function(grid, source){
this.grid = grid;
this.store = new Ext.data.GroupingStore({
recordType : Ext.ux.grid.GroupPropertyRecord,
groupField : "group"
});
this.store.on('update', this.onUpdate, this);
if(source){
this.setSource(source);
}
Ext.ux.grid.GroupPropertyStore.superclass.constructor.call(this);
};
Ext.extend(Ext.ux.grid.GroupPropertyStore, Ext.util.Observable, {
setSource : function(o){
this.source = o;
this.store.removeAll();
var data = [];
for(var k in o){
if(this.isEditableValue(o[k])){
data.push(new Ext.ux.grid.GroupPropertyRecord({name: k, value: o[k],group:k},k));
}
else if(typeof(o[k]) == 'object'){
for(var n in o[k]){
data.push(new Ext.ux.grid.GroupPropertyRecord({name: n, value: o[k][n],group:k},k+"&&"+n));
}
}
}
this.store.loadRecords({records: data}, {}, true);
},
// private
onUpdate : function(ds, record, type){
if(type == Ext.data.Record.EDIT){
var v = record.data['value'];
var oldValue = record.modified['value'];
if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
if(record.id.indexOf("&&")!=-1)
{
var values = record.id.split("&&");
this.source[values[0]][values[1]] = v;
}
else
{
this.source[record.id] = v;
}
record.commit();
this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
}else{
record.reject();
}
}
},
// private
getProperty : function(row){
return this.store.getAt(row);
},
// private
isEditableValue: function(val){
if(Ext.isDate(val)){
return true;
}else if(typeof val == 'object' || typeof val == 'function'){
return false;
}
return true;
},
// private
setValue : function(prop, value){
this.source[prop] = value;
this.store.getById(prop).set('value', value);
},
// protected - should only be called by the grid. Use grid.getSource instead.
getSource : function(){
return this.source;
}
});
主要修改了SetSource，onUpdate這兩個方法，并且修改了Store為GroupingStore。這樣在去測試，就成功的可以看到PropertyGrid已經可以分組了。效果圖如下：
這樣整個工作就完成了。
全部的源代碼下載： http://xiazai.VeVB.COm/201003/yuanma/GroupPropertyGrid.rar
