ExtJs 확장 GroupPropertyGrid code_extjs

ExtJs 자체는 WinForm 개발과 마찬가지로 풍부한 공간과 좋은 인터페이스 개발을 제공합니다. 하지만 ExtJs 공간 역시 불완전한 부분이 있지만 단점도 있고, 이를 보완하는 나름의 방법도 있습니다. ExtJ의 우수한 확장성은 ExtJ 자체 제어가 달성할 수 없는 최선의 방법입니다.
가장 일반적으로 사용되는 것은 ExtJ의 PropertyGrid입니다. ExtJ의 PropertyGrid는 사용이 매우 간단합니다. ExtJ의 공식 웹사이트에도 해당 예제가 있으므로 여기서는 설명하지 않겠습니다. 하지만 ExtJs의 PropertyGrid 자체는 그룹화를 지원하지 못하고, 속성을 표시할 때 그룹화할 수 없다는 점은 상당히 실망스럽습니다. ExtJ가 왜 그러한 메소드와 인터페이스를 제공하지 않는지 모르겠습니다.
그래서 오랫동안 온라인에서 구글링을 해보니 인터넷에 "확장 구성 요소: GroupingView PropertyGrid(Mengniu 버전)"라는 유사한 내용이 있었습니다. 작성자님이 글을 너무 잘 쓰셨는데 왜 소스코드를 안 올리셨는지 모르겠네요. 온라인에는 다른 좋은 제안이 없습니다. 필사적으로 시간을 내서 직접 작성해 볼 수밖에 없습니다. 그래서 ExtJs의 소스코드를 열어보니 PropertyGrid의 소스파일은 얼핏 보면 비교적 간단했습니다.
주요 내용은
PropertyRecord
PropertyStore
PropertyColumnModel
PropertyGrid 그래서 소스 코드를 모두 복사하고 Ext.ux.grid.GroupPropertyGrid.js라는 스크립트 파일을 생성한 후 값을 테스트해 보니 성공적으로 PropertyGrid의 소스 코드를 읽기 시작했는데 다음과 같은 문제가 발견되었습니다. >1. PropertyRecord에는 콘텐츠가 너무 적고 이름과 값만 있습니다.
2. PropertyStore는 Ext.data.GroupingStore 대신 Ext.data.Store를 사용합니다.
3. PropertyStore는 데이터에서 지원되지 않습니다. 업데이트 시 그룹화가 처리되지 않습니다
그리고 PropertyGrid는 자체적으로 그룹 그룹화를 지원할 수 있는 EditorGridPanel을 상속하므로 PropertyGrid를 수정할 필요가 없습니다.
다음은 그룹화를 지원하도록 이러한 문제를 수정합니다.
1. PropertyRecord를 수정하고 그룹 필드를 추가합니다.

코드 복사 코드는 다음과 같습니다.

Ext.ux.grid.GroupPropertyRecord=Ext .data.Record.create(

[{이름:"이름", 유형:"문자열"},"값","그룹"]
)

2. GroupingStore를 지원하도록 PropertyStore 수정

코드 복사 코드는 다음과 같습니다.

Ext. ux.grid.GroupPropertyStore = function(grid, source){

this.grid = Grid;
this.store = new Ext.data.GroupingStore({
recordType : Ext.ux.grid.GroupPropertyRecord,
groupField : " 그룹"
});
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. 관찰 가능, {
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({이름: k, 값: o[k],group:k },k));
}
else if(typeof(o[k]) == '객체'){
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 값 ​​= Record.id.split("&&")
this.source[values[0]][values[1]] =
}
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;
},

// 비공개
setValue : function(prop, value){
this.source[prop] = value
this.store.getById(prop) ).set('value', value);
},

// protected - 그리드에 의해서만 호출되어야 합니다.
getSource: function(){
return this.source;
}
});
SetSource, onUpdate 메소드를 주로 수정하였고, Store를 GroupingStore로 수정했습니다. 이런 식으로 테스트해 보면 PropertyGrid가 그룹화되는 것을 성공적으로 확인할 수 있습니다. 렌더링은 다음과 같습니다.

이렇게 하면 전체 작업이 완료됩니다.

모든 소스 코드 다운로드: http://xiazai.jb51.net/201003/yuanma/GroupPropertyGrid.rar