ExtJS : How to disable browser context menu

This is a quick solution to disabling browser default context menu when right-clicking in ExtJS.

Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});  

Basically, you can implement a TreePanel or other ExtJS components like:

new Ext.tree.TreePanel({
        listeners: {
               render: function() {
                       // After the component has been rendered, disable the default browser context menu
                       Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
               contextmenu: function(e) {
                       // Init your context menu

Tested working on FF 3.6, Chrome 3, Safari 4 and IE7. Opera 10 unfortunately fails.

, ,

  • Genial post and this enter helped me alot in my college assignement. Thank you on your information.

  • rblon

    thx for this useful tip. If you put this statement in the onReady function it disables the browsers contextmenu (= “right-click” menu) completely on your page.
    Regarding implementing your own contextmenu: it is slightly more involved than the few lines above, but the API documentation has a very clear example.

    • admin

      @rblon: Yeah, what do you mean the API doc has examples on ? What I meant here is we can init our own ExtJs Context Menu.. after disabling the browser default one.. :)

  • Heidy


    with an extjs datagrid:
    rowcontextmenu: function(grid, index, event){
    menu = new Ext.menu.Menu({
    {text: ‘Delete line, iconCls: ‘icon-delete’
    , handler:function(){grid.getStore().removeAt(index);}

    e.stopEvent() prevents the browser from displaying his own context menu (it works at least with Firefox and IE)

    • admin

      Yes you are right.. Basically just the matter of stopping Event using event.stopEvent() or @property : preventDefault.

  • jay

    You not provide syntax for that e.g

  • Ryan

    Extremely helpful, I’ve been banging my head against this for a few days now, thank you so much!