ExtJS远程列表过滤器重置问题：网格更新后数据未刷新

我太懂你这个困扰了——明明已经切换了网格的数据源，远程过滤器的下拉列表却还死死抱着旧数据不放，哪怕主store已经更新了。核心问题其实很简单：过滤器的下拉选项是绑定到独立的store上的，和主网格的store完全是两个东西，你之前折腾的都是主store，根本没碰过过滤器的那个store，它当然不会自己更新啦。

问题根源拆解 #

你的示例里，「Hobbie」过滤器的下拉选项来自hobbiesStore，这个store在第一次加载辛普森一家的数据后就缓存了结果。当你切换到Van Houtens家族的主store时，hobbiesStore既没被清空，也没重新请求新数据，所以打开过滤器时自然还是显示旧的爱好选项。store.doDestroy、removeAll这些操作只影响主网格的store，对过滤器的独立store完全无效。

具体解决方案 #

针对你的场景，有两种直接有效的处理方式：

1. 切换主store时，手动重置并重新加载过滤器的store

在切换数据源的按钮点击事件里，除了替换主网格的store，还要主动处理过滤器的下拉store：

Ext.getCmp('switchBtn').on('click', function() {
    var grid = Ext.getCmp('grid'),
        hobbiesStore = Ext.getStore('hobbies');
    
    // 替换主网格的store
    var newStore = Ext.create('VanHoutensStore');
    grid.setStore(newStore);
    
    // 重置过滤器的store并加载新数据
    hobbiesStore.removeAll(); // 清空旧数据
    hobbiesStore.load({
        params: {
            // 传递标识当前数据源的参数，让后端返回对应家族的爱好
            family: 'vanhoutens'
        }
    });
});

2. 每次打开过滤器时自动刷新下拉选项

如果想更灵活，确保每次打开过滤器都能拿到最新的选项，可以给过滤器添加beforeshow监听，触发store重新加载：

{
    text: 'Hobbie',
    dataIndex: 'hobby',
    filter: {
        type: 'list',
        store: {
            type: 'hobbies',
            autoLoad: false // 关闭自动加载，改为按需加载
        },
        queryMode: 'remote',
        listeners: {
            beforeshow: function(filter) {
                var currentStore = Ext.getCmp('grid').getStore();
                // 根据当前主store的类型，请求对应爱好数据
                filter.getStore().load({
                    params: {
                        family: currentStore.$className === 'VanHoutensStore' ? 'vanhoutens' : 'simpsons'
                    }
                });
            }
        }
    }
}

这样每次打开过滤器下拉框时，都会重新请求后端获取当前数据源对应的爱好选项，彻底避免旧数据残留。

为什么之前的绑定没生效？ #

你提到用bind:{store:'{filterStore}'}没效果，大概率是因为过滤器组件初始化后，没有监听filterStore的变化。如果要用绑定方式，需要确保过滤器的store是通过ViewModel动态绑定的，并且在主store切换时，同步更新filterStore的数据源或重新加载它。

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