Ext js按内容排序自定义列 [英] Ext js sorting custom column by contents

问题描述

我有一个网格的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; 
} 
}，
可排序：true 
}，
  

解决方案

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

  var grid = Ext.create（'Ext.grid.Panel'，{
 // ... 
列：[
 {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（{
属性： 
 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）; 
} 
}）; 
} 
} 
] 
 // .... 
}）; 
  

I have a grid in ext with some custom columns, and I want to be able to sort this column - I want to sort it by what is displayed inside of it, but really I just cannot figure out how to define a sorter for a column that will not be based on the dataIndex - I tried using a custom model, but I could not get that to work.

{
    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
},

解决方案

You should be able to override the doSort method of the column. Here's the gist of it. I also created a working fiddle (http://jsfiddle.net/cfarmerga/LG5uA/). The fiddle uses the string length of a field as the property to sort on, but of course you could apply your own custom sort logic.

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);
                    }
                });
            }
        }
    ]
   //....  
});

这篇关于Ext js按内容排序自定义列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！