EXT JS 3 - this.focusEl 是未定义的错误 onClick 的 columnGrid 标题

Posted 2023-02-26

【中文标题】EXT JS 3 - this.focusEl 是未定义的错误 onClick 的 columnGrid 标题

【英文标题】：EXT JS 3 - this.focusEl is undefined error onClick of columnGrid header

【发布时间】：2011-06-28 13:49:37

【问题描述】：

我正在使用 ExtJs 3.2.2。我编写了一个自定义上下文菜单来处理网格的 headerclick 事件。单击标题时出现“this.focusEl is undefined error”错误。我感觉它与上下文菜单中的范围有关，但我很困惑。 FF 会优雅降级并仍然显示菜单，但 IE 的行为是不可预测的。

这是网格的 headerclick 事件：

headerclick: function(grid, columnIndex, e) 
    e.stopEvent();
    var colModel = grid.getColumnModel();
    var col = colModel.getColumnById(colModel.getColumnId(columnIndex))
    contextMenu.columnId = col.id;
    contextMenu.headerName = col.header;
    contextMenu.showAt(e.getXY());

这是上下文菜单：

var contextMenu = new Ext.menu.Menu(
    items: [
        id: 'sort-high-to-low',
        cls: 'xg-hmenu-sort-asc',
        text: 'Sort Ascending within Group'
    ,
        id: 'sort-low-to-high',
        cls: 'xg-hmenu-sort-desc',
        text: 'Sort Descending within Group'
    ,'-',
        id: 'sort-high-to-low-all',
        cls: 'xg-hmenu-sort-asc',
        text: 'Sort All Ascending'
    ,
        id: 'sort-low-to-high-all',
        cls: 'xg-hmenu-sort-desc',
        text: 'Sort All Descending'
    ,'-',    
        id: 'heatmap',
        cls: 'xg-hmenu-heatmap',
        text: 'Open in Heatmap'
    ],
    listeners: 
        scope: this, // not sure if this is correct...
        itemclick: function(item) 
            switch (item.id) 
                case 'sort-high-to-low':
                    Ext.getCmp('backtestGrid').getStore().sort(contextMenu.columnId,'ASC');
                    this.hide();
                    break;
                case 'sort-low-to-high':
                    Ext.getCmp('backtestGrid').getStore().sort(contextMenu.columnId,'DESC');
                    this.hide();
                    break;
                case 'sort-high-to-low-all':
                    Ext.getCmp('backtestGrid').getStore().clearGrouping();
                    Ext.getCmp('backtestGrid').getStore().sort(contextMenu.columnId,'ASC');
                    this.hide();
                    break;
                case 'sort-low-to-high-all':
                    Ext.getCmp('backtestGrid').getStore().clearGrouping();
                    Ext.getCmp('backtestGrid').getStore().sort(contextMenu.columnId,'DESC');
                    this.hide();
                    break;
                case 'heatmap':
                    heatmapCallback(contextMenu.headerName, contextMenu.columnId);
                    this.hide();
                    break;
            
        
    
);

第二个问题是当我实际单击其中一个上下文菜单项时。我收到以下错误：

this.fireEvent is not a function

例如，第一项是排序。单击第一项时，FF 会抛出错误但仍然对网格进行排序。 IE 不对网格进行排序。

再次，我感觉这个错误与

有关

this.hide();

每个案例块中的语句。我想这是指菜单项，而不是菜单。单击每个项目后，我需要隐藏菜单。但是，即使我注释掉 this.hide() 语句，错误仍然会发生。

【参考方案1】：

我在代码中包含了一个旧版本的prototype.js，它与使用Ext JS 打包的prototype.js 版本冲突。

我一直在 Firebug 的错误日志中看到对 prototype.js 中函数的引用。我用细齿梳理了代码，直到找到参考。我删除了它，没有错误！

煎茶解决方案链接：

http://www.sencha.com/forum/showthread.php?138644-this.focusEl-is-undefined-error-on-click-of-columnGrid-header&p=619749

【讨论】：

在我的例子中，在任何 ExtJS 代码修复消息之前添加prototype.js。