ExtJS中开启multiSelect的ComboBox如何启用过滤且保留选中值？

核心原因 #

开启multiSelect的ComboBox默认过滤逻辑会根据输入条件筛选store数据，导致已选中但不符合当前过滤规则的选项从下拉列表中移除，最终无法维持选中状态。要解决这个问题，需要修改过滤逻辑，让已选中的选项始终保留在下拉列表内，同时对未选中选项正常执行过滤。

具体实现方案 #

1. 重写ComboBox的doQuery方法 #

这是处理查询过滤的核心方法，我们在其中加入保留已选中记录的逻辑：

Ext.define('MyApp.view.MultiSelectFilterCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.multiselectfiltercombo',

    multiSelect: true,
    editable: true, // 开启编辑以支持过滤输入
    queryMode: 'local', // 本地过滤示例，远程过滤需调整

    doQuery: function(queryString, forceAll, rawQuery) {
        var me = this,
            store = me.getStore(),
            selectedRecords = me.getValueRecords(),
            filterRegex;

        if (queryString && !forceAll) {
            filterRegex = new RegExp(Ext.String.escapeRegex(queryString), 'i');
            store.filter({
                filterFn: function(record) {
                    // 符合过滤规则 或是已选中的记录，都保留
                    return filterRegex.test(record.get(me.displayField)) || Ext.Array.contains(selectedRecords, record);
                }
            });
        } else {
            store.clearFilter();
        }
        me.expand();
    }
});

2. 监听选中/取消事件，同步下拉列表状态 #

当用户选中或取消选项后，重新执行当前过滤，确保下拉列表展示正确：

listeners: {
    select: function(combo) {
        combo.doQuery(combo.getRawValue());
    },
    deselect: function(combo) {
        combo.doQuery(combo.getRawValue());
    }
}

3. 远程过滤的适配（若使用queryMode: 'remote'） #

如果是远程数据源，需要后端接口配合：

• 接口接收查询参数的同时，接收已选中的选项ID集合
• 后端返回结果时，既要返回符合查询条件的记录，也要包含已选中的记录（去重处理）
• 前端只需确保store加载完成后，已选中记录能被正确识别为选中状态

关键注意事项 #

• 确认displayField配置正确，过滤逻辑匹配的是下拉显示字段
• 远程场景下必须依赖后端配合返回已选中记录，否则前端无法维持选中状态
• 测试边界场景：多次过滤后选中/取消选项、清空过滤输入等

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