ExtJs 7.X grid filter remote 自定义查询字段别名

背景：ExtJs7.X系列，我们可以在gridPanel的column中配置filter属性进行远程数据过滤，可实现filedName=XXX，但是无法指定字段的别名，例如a.filedName=XXX，经过源码调试研究，已解决，具体见下文介绍，本文基于Ext7.6。

1、修改ext-all.js源码

目前我是基于ext-all-debug.js源码进行修改，然后进行最小化操作。

修改的类为Ext.grid.filters.filter.SingleFilter，具体内容如下：

Ext.define('Ext.grid.filters.filter.SingleFilter', {
    extend: 'Ext.grid.filters.filter.Base',
    constructor: function(config) {
        var me = this,
            filter, value;
        me.callParent([
            config
        ]);
        value = me.value;
        filter = me.getStoreFilter();
        if (filter) {
            // This filter was restored from stateful filters on the store so enforce it as active.
            me.active = true;
        } else {
            // Once we've reached this block, we know that this grid filter doesn't have a stateful
            // filter, so if our flag to begin saving future filter mutations is set we know
            // that any configured filter must be nulled out or it will replace our stateful filter.
            if (me.grid.stateful && me.getGridStore().saveStatefulFilters) {
                value = undefined;
            }
            // TODO: What do we mean by value === null ?
            me.active = me.getActiveState(config, value);
            // Now we're acting on user configs so let's not futz with any assumed settings.
            filter = me.createFilter({
                operator: me.operator,
                value: value,
                // 在源码中增加这个属性，可以在生成field=XXX的时候利用property指定别名
                property: me.property || false
            });
            if (me.active) {
                me.addStoreFilter(filter);
            }
        }
        if (me.active) {
            me.setColumnActive(true);
        }
        me.filter = filter;
    },
    activate: function(showingMenu) {
        if (showingMenu) {
            this.activateMenu();
        } else {
            this.addStoreFilter(this.filter);
        }
    },
    deactivate: function() {
        this.removeStoreFilter(this.filter);
    },
    getValue: function(field) {
        return field.getValue();
    },
    onFilterRemove: function() {
        // Filters can be removed at any time, even before a column filter's menu
        // has been created (i.e., store.clearFilter()).
        if (!this.menu || this.active) {
            this.active = false;
        }
    }
});

        图1

上文在createFilter的时候，同时拷贝property属性。

2、源码分析

见ext-debug-all.js中类Ext.grid.filters.filter.Base.getFilterConfig方法:

// Note that some derived classes may need to do specific processing
    // and will have its own version of this method before calling parent (see the List filter).
    getFilterConfig: function(config, key) {
        config.id = this.getBaseIdPrefix();
        // 如果没有config.property属性，那么查询字段默认为column.dataIndex
        if (!config.property) {
            config.property = this.dataIndex;
        }
        if (!config.root) {
            config.root = this.defaultRoot;
        }
        if (key) {
            config.id += '-' + key;
        }
        config.serializer = this.getSerializer();
        return config;
    },

图2

如果没有config.property属性，那么查询字段默认为column.dataIndex。

而经调试发现，图1中的filter对象即为图2中的config参数，而原来代码中filter中没有拷贝property对象，因此图2 !config.property 判断永远为false，因此ExtJs7.X 系列永远只能默认使用column.filed.dataIndex作为查询字段，即时配置了property属性也无效。

3、效果演示

3.1、定义Store的时候指定remoteFilter为true，使用远程过滤模式。

 3.2、配置grid.column的时候，指定过滤的filed增加property参数。

 3.3、查看实际请求

 3.4、后台调试条件信息

 经过后台参数解析处理，自动拼接转化为QueryWrapper对象，利用MybatisPlus进行条件过滤查询。