Question

I’m using ExtJs 3.2.2. I wrote a custom context menu to handle a grid’s headerclick event. I get a “this.focusEl is undefined error” error when I click the header. I have a feeling it has something to do with the scope in the context menu, but I’m perplexted. FF degrades gracefully and still displays the menu but IE’s behavior is unpredictable.

This is the grid’s headerclick event:

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

This is the context menu:

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

The second question is when I actually click on one of the context menu items. I get the following error:

this.fireEvent is not a function

The first item, for exampple, is a sort. When clicking on the first item, FF will throw the error but still sort the grid. IE does not sort the grid.

Again, I have a feeling this error has to do with the

this.hide();

statements in each of the case blocks. I suppose this refers to the menu item, not the menu. After clicking on each item, I need to hide the menu. However, even if I comment out the this.hide() statements, the error still occurs.

Answer 1

I had the inclusion of an old version of prototype.js within the code that was conflicting with the version of prototype.js that is packaged with Ext JS.

I kept seeing references to functions within prototype.js in the error logs from Firebug. I wen through the code with a fine-toothed-comb until I found the reference. I removed it and no errors!

Link to the solution on Sencha:

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