ExtJs - Unable to use fireEvent for DOM contextmenu

Question

I've been trying to create a context menu on the title of a tabpanel in ExtJs, but run into some problems.

Ultimately, I wish it to appear on both right and left click; currently it appears fine on right click, but I cannot get the rightclick event to occur on leftclick also.

I have set a listener as follows:

tabPanel.items.items[len].getEl().on('contextmenu', function(event, item) { 
//the items.items is intentional
    event.stopEvent();
    Ext.ComponentQuery.query('#contextMenu')[0].showAt(event.getXY());
}

and am trying to create the contextmenu on left click also, by calling:

beforeactivate: function() {
    tabPanel = Ext.ComponentQuery.query('#tabPanelChanged tabbar')[0];
    len = tabPanel.items.items.length -1;
    button = tabPanel.items.items[len].getEl();

    button.fireEvent('contextmenu', button);
    //button.dom.oncontextmenu is null, but so is onclick
    return false; //Returning false stops the tab being activated
}

NOTE: these are all in the controller

Any help much appreciated!

Answer 1

tabPanel.items.items[len].getEl().on('contextmenu', function(event, item) { 
//the items.items is intentional
    event.stopEvent();
    Ext.ComponentQuery.query('#contextMenu')[0].showAt(event.getXY());
});

(...)

tabPanel.items.items[len].getEl().on('click', function(event, item) { 
//the items.items is intentional
    event.stopEvent();    
    Ext.ComponentQuery.query('#contextMenu')[0].showAt(event.getXY());
});