EXTJS 5：如何在EXT JS 5中排序网格列 [英] EXTJS 5 : How to sort grid column in EXT JS 5

问题描述

我最近更新了EXT JS的版本到5，并且doSort功能的覆盖不再有效。有一个想法如何做？

覆盖的例外：

  {
 text：'Custom'，
 sortable：true，
 dataIndex：'customsort'，
 doSort：function（state）{
 var ds = this.up （ '网格'）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 =这个，
 grid = me.up（'tablepanel'），
 store = grid.store; 
 
 me.sortState = me.sortState ==='ASC'？ 'DESC'：'ASC'; 
 
 Ext.suspendLayouts（）; 
 me.sorting = true; 
 store.sort（{
属性：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）; 
} 
}）; 
删除me.sorting; 
 Ext.resumeLayouts（true）; 
} 
  

但是sortFn函数从不被调用。我不知道为什么
===> !!!!它适用于EXT JS 5.0.1，但是sortFin函数永远不会被调用。 !!!!

编辑2：
这是我试图拥有的：

ASC：

  if（v1和v2是数字）return v1> V2; 
 else if（v1是一个数字，v2是一个字符串）return false; 
 else if（v1是一个字符串，v2是一个数字）return true; 
 else if（v1和v2是字符串）return v1> V2; 
  

DESC：

 code> if（v1和v2是数字）return v1< V2; 
 else if（v1是一个数字，v2是一个字符串）返回true; 
 else if（v1是一个字符串，v2是一个数字）return false; 
 else if（v1和v2是字符串）返回v1< V2; 
  

解决方案

您正在覆盖私有方法。因此，几乎预计在主要版本之后它将会崩溃。如果您查看 http：//docs.sencha。 com / extjs / 5.0.0 / apidocs / source / Column2.html＃Ext-grid-column-Column 你会看到没有 doSort 函数。

Ext的建议方法是使用 sortType config 可以采取一种功能，将您的价值转化为自然排序的功能，通常最简单的是将其转换为数字。所以如果你想要稍微不同的东西，你可以修改我发布的代码来做你想要的，而不用覆盖私有方法。

运行示例： var store = Ext.create（'Ext.data.Store'，{
fields：[{
name：'ref'，
sortType：function str）{
// Ext-JS要求您返回一个自然可排序的值
//不是您的典型比较器函数
//以下代码将所有有效整数放在
// Number.MIN_SAFE_INTEGER和0
//并假定其他值以T开始，并将
//作为正整数排序
var parsed = parseInt（str，10）;
if（isNaN（parsed））{
return parseInt（str.substring（1），10）;
} else {
return Number.MIN_SAFE_INTEGER + parsed;
}
}
}]，
数据：{
'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 /

  / **按字符串长度排序* / 
 Ext.apply（Ext。 data.SortTypes，{
 myCrazySorter：function（str）{
 // Same as above 
} 
}）; 
 
 //使用它像
 var store = Ext.create（'Ext.data.Store'，{
 fields：[{
 name：'ref '，
 sortType：'myCrazySorter'
}]，
  

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'
    }],

这篇关于EXTJS 5：如何在EXT JS 5中排序网格列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！