javascript - 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 が推奨する方法は、sortTypeconfigを使用して、値を自然にソートされるものに変換する関数を使用することです。通常、最も簡単な方法は、値を数値に変換することです。したがって、少し違うものが必要な場合は、私が投稿したコードを変更して、プライベート メソッドをオーバーライドせずに、必要なことを行うことができます。

実行例: 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

使用する必要があります

sortFn ではなく sortFn