ExtJS 7.6 GridColumn 'not like'(nlike)过滤算子无法使用求助

• nlike算子在Sencha默认的字符串过滤器中并未预设对应的过滤逻辑，这就是你配置后能看到选项但功能失效的核心原因，不少开发者遇到过这个问题，也有成熟的解决办法。

两种可行解决方案 #

方案1：在列的filter配置中自定义filterFn #

直接针对当前列的过滤逻辑做定制，覆盖所有算子的处理：

column.filter = {
    type: 'string',
    operators: ['like', 'nlike', 'empty', 'nempty'],
    filterFn: function(filter) {
        var inputValue = filter.value?.toLowerCase() || '';
        return function(record) {
            var recordValue = String(record.get(filter.field)).toLowerCase();
            switch (filter.operator) {
                case 'like':
                    return recordValue.includes(inputValue);
                case 'nlike':
                    return !recordValue.includes(inputValue);
                case 'empty':
                    return recordValue === '';
                case 'nempty':
                    return recordValue !== '';
                default:
                    return true;
            }
        };
    }
};

方案2：全局扩展字符串过滤器类 #

如果多个列都需要用到nlike算子，推荐全局扩展Ext.grid.filters.filter.String，一次性给所有字符串过滤器添加该算子的逻辑：

Ext.define('MyApp.override.StringFilter', {
    override: 'Ext.grid.filters.filter.String',
    // 覆盖默认算子列表
    operators: ['like', 'nlike', 'empty', 'nempty'],
    config: {
        filterFnMap: {
            like: function(filter, record) {
                var val = String(record.get(filter.field)),
                    input = filter.value.toLowerCase();
                return val.toLowerCase().includes(input);
            },
            nlike: function(filter, record) {
                var val = String(record.get(filter.field)),
                    input = filter.value.toLowerCase();
                return !val.toLowerCase().includes(input);
            },
            empty: function(filter, record) {
                var val = record.get(filter.field);
                return val == null || val === '';
            },
            nempty: function(filter, record) {
                var val = record.get(filter.field);
                return val != null && val !== '';
            }
        }
    }
});

注意事项 #

如果使用远程过滤，还需要同步调整后端接口，确保能识别并正确处理nlike算子对应的查询条件，前端传递的过滤参数要和后端逻辑匹配。

内容的提问来源于stack exchange，提问作者jph