EXTJS Grid inside a tab - filter only works on page refresh

0
votes

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. i am new to extjs. please help.

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'), //this menu is null and therefore the error but this is auto generated by extjs
        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);
        }
    }
}
2
extjsextjs4.1

2 Answers

1
votes

in every case, parameter header is null.

see Ext.grid.feature.Grouping.

0
votes

It seems probably a css issue, might be caused by the order in which components load and height applied to header. Use below css:

.ui-grid-header-cell{
height:60px;
max-height:60px;
}

Identify the id of header component and use it in place of .ui-grid-header-cell