ExtJS 5.0 - 覆盖以在网格列上提供自定义排序答案

【问题标题】：ExtJS 5.0 - override to provide custom ordering on a grid columnExtJS 5.0 - 覆盖以在网格列上提供自定义排序
【发布时间】：2015-08-29 04:45:49
【问题描述】：

网格控制列基于name 排序，first + ' ' + last 的组合字段。客户希望通过last + ', ' + first 订购。我不允许更改现有代码，只能使用覆盖。

基于网络搜索的结果，我认为使用sortType 转换输入值是侵入性最小的方法。但我不确定如何插入。

我认为sortType 适用于数据字段，所以在initComponent 重载时我可以访问我需要的内容吗？例如，这是我在视图中覆盖以更改渲染的方式：

initComponent: function() {
    this.callParent([]);
    this.columns[0].renderer =
        function(value, metaData, record, rowIdx, colIdx, store, view) {
            var result = '';
            if (!Ext.isEmpty(record.data) && !Ext.isEmpty(record.data.details)) {
                var details = record.data.details;
                // value == details.name is 'first last', won't be using that
                result = details.last + ', ' + details.first;
            }
            return result;
        };
}

我可以从这里访问details.name 定义以覆盖sortType 吗？会同意这不是最好的方法，因为我必须对name 进行一些解析才能将其拆分，然后将其重新组合在一起。这对于那些有多个名字和/或姓氏的人来说会有问题。

另一种方法是重载doSort，但如果我无法访问details.first 和details.last，它不会比sortType 更好。我看到了一个实现doSort 的例子，它看起来很复杂。有人知道doSort 的一些详细文档吗？

【问题讨论】：

标签： javascript extjs extjs4

【解决方案1】：

问题是sortType没有取整条记录，直接应用于columns[0].dataIndex，没有任何干扰的可能。如果您确定名字的结束位置和姓氏的开始位置，则只能使用字符串操作：

this.columns[0].sortType = function(value) {
    var spl = value.split(' ');
    return value[1] + ', ' + value[0];
}

当然，这会遇到像“Carl Friedrich Theodor Wilhelm Freiherr von und zu Guttenberg”之类的名字的问题，甚至“George W. Bush”也会是一个问题。

更好的方法是在模型中引入另一个字段，类似于

MyApp.model.Resource.getFields().push(Ext.create('Ext.data.Field',{
    name:"LastFirst",
    convert:function(v,rec) {
        return rec.get("last")+', '+rec.get("first")
    }
}));

此更改不会影响现有模型实例，因此您必须在创建任何模型实例之前执行此操作。

这将允许您设置columns[0].dataIndex="LastFirst"，取消渲染器更改，并获得有用的排序。

【讨论】：

谢谢。我将代码放在 store 构造函数中覆盖：var fields = this.model.getFields();，然后遍历fields 以检查该字段是否不存在。

【解决方案2】：

很难给出一些代码或存根，但我找到了一些关于订购的答案。据我所知，ext 4 在商店中有 sortType。因此，您真正需要的是为您的商店创建自定义 sortType（如果您还没有创建商店，请创建一个商店）。
Ext 有办法在网格中排序东西，使用 initComponent 来处理其他东西。
sortType 看起来像this

【讨论】：