Ext js按内容对自定义列进行排序

时间:2013-07-22 18:43:16

标签: sorting extjs

我在ext中有一个带有一些自定义列的网格,我希望能够对此列进行排序 - 我想根据其中显示的内容对其进行排序,但实际上我无法弄清楚如何定义分类器对于不基于dataIndex的列 - 我尝试使用自定义模型,但我无法使其工作。

{
    text: 'Parent',
    dataIndex: 'Parent',
    renderer: function(value, meta, record) {
        var ret = record.raw.Parent;
        if (ret) {
            return ret.Name;
        } else {
            meta.tdCls = 'invisible';
            return record.data.Name;
        }
    },
    sortable: true
},

3 个答案:

答案 0 :(得分:4)

您应该能够覆盖列的doSort方法。这是它的要点。我还创造了一个工作小提琴(http://jsfiddle.net/cfarmerga/LG5uA/)。小提琴使用字段的字符串长度作为要排序的属性,但当然您可以应用自己的自定义排序逻辑。

var grid = Ext.create('Ext.grid.Panel',{
    //...
    columns: [
        { text: 'name', dataIndex: 'name', sortable: true },
        {
            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 :(得分:3)

对于Ext JS版本5,看起来xxxhdpi被取出,所以我无法覆盖它。相反,我走了听sortchange事件的路线,从那里,我使用了Ext.data.Store.setSorters方法。由于我正在使用的数据,代码有点自定义,而且过于复杂,因此请记住(Fiddle here):

doSort

答案 2 :(得分:2)

Ext.data.Model类上有一个转换方法,允许您在使用之前转换数据。然后,您可以在列中指定此“dataIndex”并执行常规排序。该列将按转换后的值排序。这是一个只有一个字段(Parent)的样本模型,并带有相应的转换:

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'Parent',   type: 'string', convert: sortParent},
        // other fields...
    ],
    sortParent: function(value, record) {
        var ret = record.raw.Parent;
        if (ret) {
            return ret.Name;
        } else {
            meta.tdCls = 'invisible';
            return record.data.Name;
        }
    }
});