如何仅为ExtJS网格的单个列应用Store过滤器

这个问题我之前帮不少开发者处理过，核心原因很明确：你现在配置的是共享的Store实例，而Store的过滤器是全局生效的——只要有组件绑定了这个Store，都会受到过滤器的影响。要实现仅单列应用过滤，有两个非常实用的方案：

方案一：给目标列创建独立的Store实例 #

不要直接复用全局定义的myStore类型，而是给需要过滤的列单独创建一个Store实例。这样每个列的Store都是独立的，过滤器只会作用于当前列的数据源。

示例代码：

columns: [
    {
        text: '需要过滤的列',
        dataIndex: 'targetField',
        // 单独创建Store实例并添加过滤器
        store: Ext.create('myStore', {
            filters: [{
                filterFn: someFunction
            }]
        })
    },
    {
        text: '无需过滤的列',
        dataIndex: 'otherField',
        // 复用全局Store，不加过滤器
        store: { type: 'myStore' }
    }
]

这种方式的优势是逻辑清晰，每个列的数据源完全隔离，不会互相干扰。

方案二：使用列级别的筛选/编辑过滤逻辑 #

如果不想创建多个Store实例，可以在列自身的筛选器（或编辑器）中实现本地过滤，不修改原Store的全局过滤器。这种方式下，Store本身依然是共享的，但过滤逻辑只作用于当前列的交互场景。

针对列筛选场景的示例： #

columns: [
    {
        text: '需要过滤的列',
        dataIndex: 'targetField',
        store: { type: 'myStore' },
        filter: {
            type: 'list',
            // 这里的filterFn是列级别的，仅作用于该列的筛选操作
            filterFn: function(item) {
                return someFunction(item);
            }
        }
    },
    {
        text: '无需过滤的列',
        dataIndex: 'otherField',
        store: { type: 'myStore' }
    }
]

针对列编辑器（如ComboBox）的示例： #

如果你的场景是列编辑器的下拉选项需要过滤，同样可以给编辑器单独配置过滤逻辑：

columns: [
    {
        text: '带过滤的编辑列',
        dataIndex: 'targetField',
        editor: {
            xtype: 'combo',
            store: { type: 'myStore' },
            queryMode: 'local',
            displayField: 'name',
            valueField: 'id',
            // 仅在编辑器下拉时应用过滤
            filterPickList: true,
            listConfig: {
                filters: [{
                    filterFn: someFunction
                }]
            }
        }
    }
]

关键提醒 #

无论用哪种方案，核心思路都是避免在共享的Store实例上添加全局过滤器——要么用独立Store隔离数据源，要么把过滤逻辑限制在列自身的交互范围内，这样就能保证其他列不受影响。

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