ExtJS 5.1 - 网格与网格过滤器插件在网格重新配置后中断

ExtJS 5.1 - Grid with gridfilters plugin breaks after grid.reconfigure

本文关键字：网格 新配置 配置 中断 插件 过滤器 ExtJS      更新时间：2023-09-26

我正在将一些 ExtJS 4 的东西迁移到 ExtJS 5.1。 我有一个网格，可以从服务器获取它的元数据，并在元交换事件上重新配置存储：

store: Ext.create('Ext.data.Store', {
    model: 'MyModel',
    listeners: {
        metachange: function (store, meta) {
            this.grid.reconfigure(store, meta.columns);
        },
        scope: this
    },
    proxy: {
        type: 'ajax',
        url: '/mygriddata',
        reader: {
            type: 'json',
            rootProperty: 'rows',
            totalProperty: 'totalRows'
        }
    }
})

我还为此网格启用了网格过滤器。 当商店首次加载时，一切正常。 我可以按下网格列的触发按钮，列菜单显示"升序排序"、"降序排序"、"过滤器"，并且我可以使用我为该列指定的过滤器（日期、字符串等）。

但是，在存储重新加载不同的元数据后，事情会中断，从而触发元更改事件并调用 grid.reconfigure。 具体来说，当我单击网格列的触发按钮时，我得到一个"未定义不是函数错误"，并且列菜单没有出现。

如果我在没有先单击列触发器按钮的情况下更改元数据，则不会发生此错误 - 这与构建过滤器菜单项然后重新配置网格有关，这会破坏过滤器菜单项。 似乎当我重新配置网格时，我还需要以某种方式刷新过滤器或重建菜单项，但我不确定如何做到这一点。任何帮助将不胜感激，谢谢！

错误的完整堆栈跟踪：

Uncaught TypeError: undefined is not a function ext-all-debug.js:86455
Ext.define.getDockedItems ext-all-debug.js:86465 
Ext.define.getDockingRefIt emsext-all-debug.js:87641 
Ext.define.getRefItems ext-all-debug.js:130763 
Ext.define.getRefItems ext-all-debug.js:75497
Ext.define.getRefItems ext-all-debug.js:7378
Ext.Base.Base.addMembers.callParent ext-all-debug.js:87640 
Ext.define.getRefItems ext-all-debug.js:15057 
getItems ext-all-debug.js:15310 
cq.Query.Ext.extend._execute ext-all-debug.js:15271 
cq.Query.Ext.extend.execute ext-all-debug.js:15480 
Ext.apply.query ext-all-debug.js:63058 
Ext.define.query ext-all-debug.js:63101 
Ext.define.down ext-all-debug.js:101658
Ext.define.showMenuBy ext-all-debug.js:101651
Ext.define.onHeaderTriggerClick ext-all-debug.js:101179
Ext.define.onHeaderCtEvent ext-all-debug.js:11800
fire ext-all-debug.js:18530
Ext.define.fire ext-all-debug.js:18506
Ext.define.publish ext-all-debug.js:18556
Ext.define.doDelegatedEvent ext-all-debug.js:18543
Ext.define.onDelegatedEvent ext-all-debug.js:4402
Ext.Function.ExtFunction.bind.method

我的解决方案：

Ext.define('Overrides.grid.filters.Filters', {
    override: 'Ext.grid.filters.Filters',
    onReconfigure: function(grid, store, columns, oldStore) {
        var me = this;
        me.sep = Ext.destroy(me.sep);
        if (me.menuItems && me.menuItems[grid.id]) {
            me.menuItems[grid.id].destroy();
        }
        me.callParent(arguments);
    }
});
相关文章：