I recently updated version of EXT JS to 5 and and override of doSort function no longer works. Someone an idea how to do ?
Exampple of override :
{
text: 'Custom',
sortable : true,
dataIndex: 'customsort',
doSort: function(state) {
var ds = this.up('grid').getStore();
var field = this.getSortParam();
ds.sort({
property: field,
direction: state,
sorterFn: function(v1, v2){
v1 = v1.get(field);
v2 = v2.get(field);
return v1.length > v2.length ? 1 : (v1.length < v2.length ? -1 : 0);
}
});
}
}
Edit 1 : I just try the solution of @tomgranerod but the me.sortState is always 'undefined'. So I do this to update my variable :
sort: function () {
var me = this,
grid = me.up('tablepanel'),
store = grid.store;
me.sortState = me.sortState === 'ASC' ? 'DESC' : 'ASC';
Ext.suspendLayouts();
me.sorting = true;
store.sort({
property: me.getSortParam(),
direction: me.sortState,
sortFn: function (v1, v2) {
v1 = v1.get(field);
v2 = v2.get(field);
return v1.length > v2.length ? 1 : (v1.length < v2.length ? -1 : 0);
}
});
delete me.sorting;
Ext.resumeLayouts(true);
}
But the sortFn funcion is never called. I don't know why. ===> !!!! it works with EXT JS 5.0.1 but the sortFin function is always never called. !!!!
Edit 2 : This is what i attempt to have :
ASC :
if (v1 and v2 are numbers) return v1 > v2;
else if (v1 is a number and v2 a string) return false;
else if (v1 is a string and v2 a number) return true;
else if (v1 and v2 are strings) return v1 > v2;
DESC :
if (v1 and v2 are numbers) return v1 < v2;
else if (v1 is a number and v2 a string) return true;
else if (v1 is a string and v2 a number) return false;
else if (v1 and v2 are strings) return v1 < v2;
You were overriding a private method. So it's almost expected that it would break after a major release. If you look at http://docs.sencha.com/extjs/5.0.0/apidocs/source/Column2.html#Ext-grid-column-Column You'll see that there's no doSort
function anymore.
Ext's suggested way is by to use sortType
config can take a function which converts your value into something that sorts naturally, usually the easiest thing is to convert it into a number. So if you want something slightly different, you can modify the code I've posted to do what you want without overriding private methods.
Running Example: https://fiddle.sencha.com/#fiddle/8km
var store = Ext.create('Ext.data.Store', {
fields: [{
name: 'ref',
sortType: function(str) {
// Ext-JS requires that you return a naturally sortable value
// not your typical comparator function.
// The following code puts all valid integers in the range
// Number.MIN_SAFE_INTEGER and 0
// And assumes the other values start with T and sorts
// them as positive integers
var parsed = parseInt(str, 10);
if ( isNaN( parsed ) ){
return parseInt(str.substring(1), 10);
} else {
return Number.MIN_SAFE_INTEGER + parsed;
}
}
}],
data: {
'items': [
{'ref': '1'},
{'ref': '12'},
{'ref': 'T0134'},
{'ref': '121878'},
{'ref': 'T0134343'},
{'ref': 'T01POPI'},
{'ref': '103'},
{'ref': 'T01'}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Grid custom',
store: store,
columns: [{
text: 'Reference',
dataIndex: 'ref',
}],
height: 300,
width: 400,
renderTo: Ext.getBody()
});
If you're going to be reusing this functionality, take a look at http://spin.atomicobject.com/2012/07/20/simple-natural-sorting-in-extjs/
/** Sort on string length */
Ext.apply(Ext.data.SortTypes, {
myCrazySorter: function (str) {
// Same as above
}
});
// And use it like
var store = Ext.create('Ext.data.Store', {
fields: [{
name: 'ref',
sortType: 'myCrazySorter'
}],