PDA

View Full Version : How to change the default sort mechanism of grid column



samir_ware
19 Jun 2012, 12:13 AM
Helllo All
I am willing to have custom sorting mechanism for column sorting in grid. Is there any hook EXT has provided for such custom sorting ?
Thanks
Samir

evant
19 Jun 2012, 12:38 AM
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Field-cfg-sortType

samir_ware
19 Jun 2012, 1:00 AM
Thanks Evan ...
That helps .
Thank you very much

adityavarma.mca
19 Jun 2012, 3:44 AM
It saved my time....

mwilliamsShields
10 Jun 2014, 12:17 PM
It looks like sortType can only sort a list on the model level. Is there a way to define a sort on the grid column?


http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Field-cfg-sortType

incutonez
9 Jul 2015, 5:16 PM
It looks like sortType can only sort a list on the model level. Is there a way to define a sort on the grid column?

I know this is a bit late, but I came up with a way of doing it for columns in Ext JS 5, seeing as how doSort (http://stackoverflow.com/questions/17795019/ext-js-sorting-custom-column-by-contents) was taken out. I decided to listen to the sortchange (http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.grid.Panel-event-sortchange) event, and from there, use the Ext.data.Store.setSorters (http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.data.Store-method-setSorters) method. Excuse the complex sorterFn, but here's the relevant code (and Fiddle (https://fiddle.sencha.com/#fiddle/q7g)):



// grid class
initComponent: function() {
...
this.on('sortchange', this.onSortChange, this);
},

onSortChange: function(container, column, direction, eOpts) {
// check for dayColumnIndex
if (column && column.dayColumnIndex !== undefined) {
this.sortColumnByIndex(column.dayColumnIndex, direction);
}
},

sortColumnByIndex: function(columnIndex, direction) {
var store = this.getStore();
if (store) {
var sorterFn = function(rec1, rec2) {
var sortValue = false;
if (rec1 && rec2) {
var day1;
var daysStore1 = rec1.getDaysStore();
if (daysStore1) {
day1 = daysStore1.getAt(columnIndex);
}
var day2;
var daysStore2 = rec2.getDaysStore();
if (daysStore2) {
day2 = daysStore2.getAt(columnIndex);
}
if (day1 && day2) {
sortValue = day1.get('value') > day2.get('value');
}
}
return sortValue;
};
if (direction !== 'ASC') {
sorterFn = function(rec1, rec2) {
var sortValue = false;
if (rec1 && rec2) {
var day1;
var daysStore1 = rec1.getDaysStore();
if (daysStore1) {
day1 = daysStore1.getAt(columnIndex);
}
var day2;
var daysStore2 = rec2.getDaysStore();
if (daysStore2) {
day2 = daysStore2.getAt(columnIndex);
}
if (day1 && day2) {
sortValue = day1.get('value') < day2.get('value');
}
}
return sortValue;
};
}
// this is the key to it all right here
store.setSorters([{
sorterFn: sorterFn
}]);
}
}


q7g