Extended ExtJs: GroupPropertyGrid code_extjs

In the past few days, I have made a Web project and used ExtJs. There is an interface like a designer. Select the content on the interface and you can directly edit the attributes of the content, this was originally quite simple for ExtJs. ExtJs itself provides rich space and good interface development, just like WinForm development. However, ExtJs has an imperfect space, but its shortcomings also have its own methods to make up for it. The good scalability of ExtJs is the best method that ExtJs itself cannot implement.
The PropertyGrid of ExtJs and the PropertyGrid of ExtJs are the most widely used ones. corresponding examples are provided on the official ExtJs website. However, the PropertyGrid of ExtJs itself does not support grouping, and attributes cannot be grouped as displayed. This is quite depressing. I don't know why ExtJs does not provide such methods and interfaces.
So Google has been on the Internet for a long time, and there is similar content on the Internet, called extended components: GroupingView + PropertyGrid (Mengniu version). The landlord wrote well, but I don't know why I didn't paste the source code. There are no other good suggestions on the Internet. In desperation, you have to spend some time writing it yourself. Open the source code of ExtJs and find the source file of PropertyGrid,
The main content is:
PropertyRecord
PropertyStore
PropertyColumnModel
PropertyGrid
So we copied all the source code and created the file named Ext. ux. grid. groupPropertyGrid. js script file, and test the value, successfully passed, began to read the source code of PropertyGrid, found the following problems:
1. The PropertyRecord type contains too little content, only name and value,
2. PropertyStore uses Ext. data. Store instead of Ext. data. GroupingStore.
3. data used by PropertyStore does not support grouping and is not processed during update.
PropertyGrid does inherit EditorGridPanel, which itself supports Group groups, so that the PropertyGrid does not need to be modified.
Modify these questions to support grouping:
1. Modify PropertyRecord and add the Group field.

The Code is as follows:

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

2. Modify PropertyStore to support GroupingStore

The Code is as follows:

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 ('beforepropertychang', 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 ('propertychang', 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-shocould only be called by the grid. Use grid. getSource instead.
GetSource: function (){
Return this. source;
}
});

The SetSource and onUpdate methods are modified, and the Store is changed to GroupingStore. In this way, we can see that the PropertyGrid can be grouped successfully. As follows:

This completes the work.

Download all source code: http://xiazai.jb51.net/201003/yuanma/GroupPropertyGrid.rar