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

Question

I'm migrating some ExtJS 4 stuff to ExtJS 5.1. I have a grid that gets it's metadata from the server and reconfigures the store on the metachange event:

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'
        }
    }
})

I also have gridfilters enabled for this grid. When the store loads for the first time, everything works correctly. I can press the trigger button for a grid column, the column menu appears with 'Sort Ascending', 'Sort Descending', 'Filters', and I can use the filter (date, string, etc) that I had specified for that column.

However, things break after the store reloads with different metadata, thus firing the metachange event and calling grid.reconfigure. Specifically, when I click on the trigger button of a grid column I get an 'undefined is not a function error' and the column menu does not appear.

This error does not occur if I change the metadata without first clicking on a column trigger button - it's something to do with building the filter menu item and then reconfiguring the grid, which breaks the filter menu item. It appears that when I reconfigure the grid I also need to somehow refresh the filters or rebuild the menu items but I'm not sure how to do that. Any help would be greatly appreciated, thanks!

Full stack trace of error:

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

what errors are you getting in the console? it's difficult to diagnose this without knowing what metadata you are returning and configuring. a config property may have changed or been removed in the version change. — Scriptable

medreces medreces · Accepted Answer · 2015-04-05T16:57:47

My solution:

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);
    }
});

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

1 Answers