快捷導(dǎo)航

ExtJs擴(kuò)展之GroupPropertyGrid代碼

更新時(shí)間：2010年03月05日 22:38:00 作者：

這幾天做一個(gè)Web項(xiàng)目，使用了ExtJs，其中有個(gè)像設(shè)計(jì)器一樣的界面，選擇界面上的內(nèi)容，可以直接編輯內(nèi)容的屬性，這個(gè)原本來(lái)說(shuō)對(duì)于使用ExtJs還是很簡(jiǎn)單的。

ExtJs本身就提供了豐富的空間和良好的界面開發(fā)，就如同WinForm的開發(fā)一樣。但是ExtJs的空間也有不完美的地方，但是有缺點(diǎn)也有他自己的彌補(bǔ)方法。ExtJs的良好的擴(kuò)展性就是ExtJs自己控件不能實(shí)現(xiàn)的最好的方法。
這幾個(gè)中使用最多的當(dāng)屬ExtJs的PropertyGrid，ExtJs的PropertyGrid使用起來(lái)時(shí)相當(dāng)簡(jiǎn)單的，在ExtJs的官方網(wǎng)站上也有相應(yīng)的例子，簡(jiǎn)單的就不在敘述了。但是ExtJs本身的PropertyGrid不能支持分組，在顯示的不能將屬性進(jìn)行分組，這是相當(dāng)郁悶的。不知道為什么ExtJs不提供這樣的方法和接口。
于是在網(wǎng)上Google了許久，網(wǎng)上也有類似的內(nèi)容，叫做《擴(kuò)展組件：GroupingView+ PropertyGrid （蒙牛版）》。樓主寫的很好，但是不知道為什么沒(méi)有將源碼貼上。網(wǎng)上也沒(méi)有其他的好的建議。無(wú)奈中，只能自己花點(diǎn)時(shí)間去寫個(gè)吧。于是打開了ExtJs的源代碼，找到了PropertyGrid的源文件，一看，還是比較簡(jiǎn)單的，
其中幾個(gè)主要內(nèi)容就是：
PropertyRecord
PropertyStore
PropertyColumnModel
PropertyGrid
于是拷貝了全部的源代碼，創(chuàng)建了文件名為Ext.ux.grid.GroupPropertyGrid.js的腳本文件，并測(cè)試值，成功通過(guò)，開始閱讀PropertyGrid的源代碼，發(fā)現(xiàn)了以下幾個(gè)問(wèn)題：
1、PropertyRecord這個(gè)種的內(nèi)容太少了，僅有name和value，
2、PropertyStore使用的是Ext.data.Store，而沒(méi)有使用Ext.data.GroupingStore
3、PropertyStore使用的數(shù)據(jù)中不支持分組，并且更新的時(shí)候沒(méi)有對(duì)分組進(jìn)行處理
而PropertyGrid確實(shí)繼承EditorGridPanel，這個(gè)本身就是可以支持Group分組的，這樣PropertyGrid中就不需要修改了。
下面就對(duì)這幾個(gè)問(wèn)題進(jìn)行修改，讓他支持分組：
1、修改PropertyRecord,添加Group字段。

復(fù)制代碼代碼如下:

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

2、修改PropertyStore以支持GroupingStore

復(fù)制代碼代碼如下:

 
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; 
} 
}); 