ExtJS 7.4 Modern Toolkit使用groupfield时Grid filterbar筛选值不显示

问题原因 #

ExtJS 7.4 Modern 版本的Filterbar组件存在原生逻辑缺陷：和Classic Toolkit内置的自动同步逻辑不同，Modern的Filterbar在初始化、store过滤器更新（尤其是结合GroupField分组触发store重排）时，不会主动将store中已有的过滤器值同步渲染到对应列的筛选输入框UI上，导致筛选实际生效但前端无显示的问题。

修复方案 #

方案1：单次触发同步（适用临时修复） #

在完成筛选值设置、或者Grid完成渲染后，主动调用Filterbar的同步逻辑即可，代码示例：

// 给grid设置完筛选值后执行以下代码
const filterBar = grid.getPlugin('filterbar');
if (filterBar) {
    // 遍历所有已激活的过滤器，同步到对应列的输入框
    grid.getStore().getFilters().each(filter => {
        const column = grid.getColumnForField(filter.getProperty());
        if (column && column.filter) {
            column.filter.setValue(filter.getValue());
        }
    });
}

方案2：全局重写逻辑（适用项目全量适配） #

直接重写Modern Filterbar的过滤器监听逻辑，让它和Classic一样自动同步，不需要修改现有业务代码：

Ext.define('Ext.overrides.grid.plugin.FilterBar', {
    override: 'Ext.grid.plugin.FilterBar',
    init: function(grid) {
        this.callParent(arguments);
        // 监听store过滤器更新事件，自动同步UI
        grid.getStore().on('filterchange', (store, filters) => {
            if (!this.isFiltering) { // 避免循环触发过滤逻辑
                filters.forEach(filter => {
                    const column = grid.getColumnForField(filter.getProperty());
                    if (column && column.filter) {
                        column.filter.setValue(filter.getValue());
                    }
                });
            }
        }, this);
    }
});

将这段重写代码放在项目初始化的公共脚本中即可生效，所有带Filterbar的Grid都会自动适配该逻辑。

注意事项 #

• 给Grid列配置Filter时，要确保过滤器的property属性和列绑定的dataIndex完全一致，否则会找不到对应列导致同步失败。
• 若使用远程过滤，需要在store加载完成后再执行一次同步操作，避免异步加载导致的同步时机偏差。

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