EXTJS 5：如何在 EXT JS 5 中对网格列进行排序

Question

我最近将 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 始终是“未定义”。 所以我这样做是为了更新我的变量：

    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 函数永远不会被调用。我不知道为什么。 ===> !!!!它适用于 EXT JS 5.0.1，但永远不会调用 sortFin 函数。 ！！！！

编辑 2： 这就是我想要的：

升序：

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;

描述：

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;

Answer 1

您正在覆盖私有方法。所以几乎可以预料它会在一个主要版本之后中断。如果您查看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'
    }],

Answer 2

ExtJS 5 中的 doSort 等价函数，在快速查看 Ext.grid.column.Column 的源代码后，似乎是 'sort'。我在这个例子中使用的 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 描述的解决方案比重写内部排序函数更安全、更可行。

Answer 3

我终于找到了在排序过程中比较两条记录的方法：

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) 将新类型设置为网格中的列（使用别名），不要忘记正确设置所需的配置：

columns  : [
        {
            xtype     : 'referencecolumn',
            text      : 'Reference',
            dataIndex : 'ref',
            flex      : 1
        }
    ]

Answer 4

你需要使用

sorterFn 不是 sortFn