PDA

View Full Version : [extending Ext.grid.ColumnModel...] dataIndex and sortIndex



tarini
22 Sep 2009, 4:40 AM
I would like to share with you this little upgrade of Ext.grid.ColumnModel.

I've added a new options for each column: sortIndex.

This options aims to split between dataIndex (used to find property inside the related store) and storeIndex (property name used to sort data).

In my example I've two fields encapsulate the same semantic:
- date (a simple javascript date object)
- dateToString (locale-rappresentation of the date - created runtime as a new field without using renderer)

In grid I would like to show dateToString field and aims user to remotely sort this field using date property (dateToString isn't a server-side property). With this upgrade you can do this!

Here my little code:


Ext.grid.ColumnModel.override({
getSortIndex : function(col) {
return this.config[col].sortIndex || this.config[col].dataIndex;
},
findColumnIndex : function(dataIndex){
var c = this.config;
for(var i = 0, len = c.length; i < len; i++){
if(c[i].dataIndex == dataIndex || c[i].sortIndex == dataIndex){
return i;
}
}
return -1;
}
});
Ext.grid.GridView.override({
onHeaderClick : function(g, index){
if(this.headersDisabled || !this.cm.isSortable(index)){
return;
}
g.stopEditing(true);
g.store.sort(this.cm.getSortIndex(index));
}
});

here usage:

...., {
header: "Date",
sortable: true,
dataIndex: "date",
sortIndex: "dateToString",
width: 35
}, ....

have fun ;)

dschano
13 Jul 2010, 5:51 AM
exactly what i was looking for.
the only tiny issue is at the "usage code", it should be sortIndex:'date' and dataIndex:'dateToString' .

JVCHBABU
7 Sep 2011, 1:16 AM
It works fine, where as I am using this functionality in multiple pages and each page contains the below code fragment.


Ext.grid.ColumnModel.override({
getSortIndex : function(col) {
return this.config[col].sortIndex || this.config[col].dataIndex;
},
findColumnIndex : function(dataIndex){
var c = this.config;
for(var i = 0, len = c.length; i < len; i++){
if(c[i].dataIndex == dataIndex || c[i].sortIndex == dataIndex){
return i;
}
}
return -1;
}
});
Ext.grid.GridView.override({
onHeaderClick : function(g, index){
if(this.headersDisabled || !this.cm.isSortable(index)){
return;
}
g.stopEditing(true);
g.store.sort(this.cm.getSortIndex(index));
}
});

Is there any better way to put it in a common file and calling it using function call?