我最近将EXT JS的版本更新为5，并且覆盖doSort功能不再有效。有人知道怎么做？
覆盖范例：
{
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);
}
});
}
}
编辑1： 我只是尝试@tomgranerod的解决方案，但me.sortState始终是'undefined'。 所以我这样做是为了更新我的变量：
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);
}
但是从不调用sortFn函数。我不知道为什么。 ===＆GT; !!!!它适用于EXT JS 5.0.1，但始终不会调用sortFin函数。 !!!!
编辑2： 这是我试图拥有的：
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;
答案 0 :(得分：5)
您正在覆盖私有方法。所以几乎可以预期它会在重大发布后破裂。如果你看http://docs.sencha.com/extjs/5.0.0/apidocs/source/Column2.html#Ext-grid-column-Column，你会发现没有doSort功能了。
Ext的建议方法是使用sortType config可以使用一个函数将您的值转换为自然排序的东西，通常最简单的方法是将其转换为数字。因此，如果你想要稍微不同的东西，你可以修改我发布的代码来做你想做的事情而不会覆盖私有方法。
运行示例：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()
});
如果您要重复使用此功能，请查看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'
}],
答案 1 :(得分：1)
在快速查看Ext.grid.column.Column的源代码之后，与ExtJS 5中的doSort等效的函数似乎是“排序”。我在此示例中使用的sortState参数似乎已在ExtJS 5.0.1中引入。
sort: function () {
var me = this,
grid = me.up('tablepanel'),
direction,
store = grid.store;
direction = me.sortState === 'ASC' ? 'DESC' : 'ASC';
Ext.suspendLayouts();
me.sorting = true;
store.sort({
sorterFn: function (v1, v2) {
v1 = v1.get(me.getSortParam());
v2 = v2.get(me.getSortParam());
return v1.length > v2.length ? 1 : (v1.length < v2.length ? -1 : 0);
},
direction: direction
});
delete me.sorting;
Ext.resumeLayouts(true);
}
然而，Juan Mendes所描述的解决方案比覆盖内部排序功能更安全可行。
答案 2 :(得分：0)
我终于找到了一种在排序过程中比较两个记录的方法：
1）定义自定义列：
Ext.define('Eloi.grid.column.ReferenceColumn', {
extend : 'Ext.grid.column.Column',
alias : 'widget.referencecolumn',
config : {
ascSorter : null,
descSorter : null
},
destroy : function() {
delete this.ascSorter;
delete this.descSorter;
this.callParent();
},
/**
* @param {String} state The direction of the sort, `ASC` or `DESC`
*/
sort : function(state) {
var me = this,
tablePanel = me.up('tablepanel'),
store = tablePanel.store,
sorter = this[state === 'ASC' ? 'getAscSorter' : 'getDescSorter']();
Ext.suspendLayouts();
this.sorting = true;
store.sort(sorter, state, 'replace');
delete this.sorting;
Ext.resumeLayouts(true);
},
getAscSorter : function() {
var sorter = this.ascSorter;
if (!sorter) {
sorter = new Ext.util.Sorter({
sorterFn : this.createSorter('ASC'),
direction : 'ASC'
});
this.setAscSorter(sorter);
}
return sorter;
},
getDescSorter : function() {
var sorter = this.ascSorter;
if (!sorter) {
sorter = new Ext.util.Sorter({
sorterFn : this.createSorter('DESC'),
direction : 'DESC'
});
this.setAscSorter(sorter);
}
return sorter;
},
createSorter : function(state) {
var dataIndex = this.dataIndex;
return function(rec1, rec2) {
var v1 = rec1.get(dataIndex),
v2 = rec2.get(dataIndex),
num1 = parseInt(v1),
num2 = parseInt(v2),
ret;
if (num1 && num2) {
ret = num1 > num2 ? 1 : (num1 < num2 ? -1 : 0);
} else {
if (!num1 && !num2) {
num1 = parseInt(v1.substr(1));
num2 = parseInt(v2.substr(1));
ret = num1 > num2 ? 1 : (num1 < num2 ? -1 : 0);
}
if (!num1) {
ret = 1;
}
if (!num2) {
ret = -1;
}
}
if (state === 'DESC') {
ret = ret * -1;
}
return ret;
};
}
});
2）将新类型设置为网格中的列（带别名），不要忘记正确设置require配置：
columns : [
{
xtype : 'referencecolumn',
text : 'Reference',
dataIndex : 'ref',
flex : 1
}
]
答案 3 :(得分：0)
您需要使用
sorterFn not sortFn