we are using extjs 4.1 and i have run into a weird issue. We have a group of 3 tabs and those tabs contains extjs grids. extjs grids in the first 2 are loading the data fine and also have filter option. extjs grid in the 3rd tab, loads the data but does not show the filter menu. However, when the page is refreshed while on the 3rd tab, the grid shows the filter menu.




ext-all-debug-w-comments-v4.1.2a.js:144232 Uncaught TypeError: Cannot read property 'enable' of null
at constructor.showMenuBy (ext-all-debug-w-comments-v4.1.2a.js:144232)
at constructor.onHeaderTriggerClick (ext-all-debug-w-comments-v4.1.2a.js:141028)
at constructor.onElClick (ext-all-debug-w-comments-v4.1.2a.js:142124)
at HTMLDivElement.eval (eval at cacheableFunctionFactory (ext-all-debug-w-comments-v4.1.2a.js:683), <anonymous>:6:13)
at HTMLDivElement.wrap (ext-all-debug-w-comments-v4.1.2a.js:15197)




the following line is where the error is happening but this line is within extjs


showMenuBy: function(t, header) {
var menu = this.getMenu(),
groupMenuItem = menu.down('#groupMenuItem'),
groupMenuMeth = header.groupable === false ? 'disable' : 'enable',
groupToggleMenuItem = menu.down('#groupToggleMenuItem');


groupMenuItem[groupMenuMeth](); //this statement is null and throws the error
if (groupToggleMenuItem) {
groupToggleMenuItem[this.view.store.isGrouped() ? 'enable' : 'disable']();
}
Ext.grid.header.Container.prototype.showMenuBy.apply(this, arguments);
}



//code from the onHeaderTrigerClick stackTrace:


onHeaderTriggerClick: function(header, e, t) {
// generate and cache menu, provide ability to cancel/etc
var me = this;
if (header.fireEvent('headertriggerclick', me, header, e, t) !== false && me.fireEvent("headertriggerclick", me, header, e, t) !== false) {
me.showMenuBy(t, header);
}
}


//code from onElClick:


onElClick: function(e, t) {


// The grid's docked HeaderContainer.
var me = this,
ownerHeaderCt = me.getOwnerHeaderCt();


if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
// Firefox doesn't check the current target in a within check.
// Therefore we check the target directly and then within (ancestors)
if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
ownerHeaderCt.onHeaderTriggerClick(me, e, t);
// if its not on the left hand edge, sort
} else if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
me.toggleSortState();
ownerHeaderCt.onHeaderClick(me, e, t);
}
}
}