选项卡内的 EXTJS 网格 - 过滤器仅适用于页面刷新

Question

我们使用的是 extjs 4.1，我运行遇到了一个奇怪的问题。我们有一组 3 个选项卡，这些选项卡包含 extjs 网格。前 2 个中的 extjs 网格可以很好地加载数据，并且还具有过滤器选项。第三个选项卡中的 extjs 网格加载数据但不显示过滤器菜单。但是，当在第 3 个选项卡上刷新页面时，网格会显示过滤器菜单。我是 extjs 的新手。请帮忙

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)

下一行是错误发生的地方，但这一行在 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);
}

//来自 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);
    }
}

//来自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);
        }
    }
}

Answer 1

这似乎是一个 css 问题，可能是由组件加载的顺序和应用到 header 的高度引起的。使用下面 css:

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

识别header组件的id，用它代替。ui-grid-header-cell

Answer 2

在每种情况下，参数 header 都是 null。

参见 Ext.grid.feature.Grouping。

选项卡内的 EXTJS 网格 - 过滤器仅适用于页面刷新

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

extjs

extjs4.1