EXT JS 3-单击columnGrid标题时this.focusEl出现未定义错误

EXT JS 3 - this.focusEl is undefined error onClick of columnGrid header

本文关键字:focusEl 未定义 错误 this JS 单击 columnGrid 标题 EXT      更新时间:2023-09-26

我使用的是ExtJs 3.2.2。我编写了一个自定义上下文菜单来处理网格的headrclick事件。当我点击标题时,我得到一个"this.focusEl是未定义错误"的错误。我觉得这与上下文菜单中的范围有关,但我很困惑。FF优雅地降级并且仍然显示菜单,但是IE的行为是不可预测的。

这是网格的headrclick事件:

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();

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

我在代码中包含了一个旧版本的prototype.js,这与使用ExtJS打包的prototype.js版本相冲突。

我在Firebug的错误日志中不断看到对prototype.js中函数的引用。我仔细地梳理代码,直到找到参考资料。我删除了它,没有任何错误!

Sencha上的解决方案链接:

http://www.sencha.com/forum/showthread.php?138644-this.focusEl是未定义的错误,点击columnGrid标题&p=619749