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

Posted 2023-02-26

【中文标题】选项卡内的 EXTJS 网格 - 过滤器仅适用于页面刷新

【英文标题】：EXTJS Grid inside a tab - filter only works on page refresh

【发布时间】：2019-06-11 13:19:03

【问题描述】：

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

【参考方案1】：

在任何情况下，参数header 都是null。

见Ext.grid.feature.Grouping。

【讨论】：

就我而言，当我检查标题元素时，它不为空，但 menu.down('#groupMenuItem') 为空。但是，由于此代码是由 extjs 生成的，因此我如何找到它在我的表单中的使用位置。这是来自标题元素的值：构造函数 xtype: "gridcolumn", stateId: "SurnameState", stateful: true, width: 125, dataIndex: "Surname", ...

@Baahubali 查看文档链接中的“示例”和“实时预览”；完成此操作所需的代码要少得多（假设商店正确处理分组；例如，在服务器端使用GROUP BY）。

谢谢马丁。通过添加此语句，菜单开始工作：enableGroupingMenu: false。但是，我仍然不知道为什么会发生此错误。您认为这是商店方面不处理分组的问题吗？

@Baahubali 甚至不清楚它是什么商店；那个 grid-plugin 应该是 features: [ftype: 'grouping'] ...这是另一个 fiddle 与 group-sort; memory 商店应该支持它； ajax 存储应该在服务器端分组，因为分组/排序参数附加到请求 URL。

它是一个 ajax 商店。我有另外两个具有完全相同场景的网格面板，它们都工作正常。仅当我在第一次加载后刷新页面（如果此选项卡不是第一个加载）或我使此选项卡首先加载导致问题消失时，此选项才能正常工作。

【参考方案2】：

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

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

标识头部组件的id并用它代替.ui-grid-header-cell