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.

    6 Comments to “ExtJS : How to disable browser context menu”

    1. WP ThemesNo Gravatar 15 February 2010 at 4:36 pm #

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

    2. rblonNo Gravatar 1 March 2010 at 4:29 pm #

      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.

    3. adminNo Gravatar 1 March 2010 at 7:03 pm #

      @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.. :)

    4. HeidyNo Gravatar 30 September 2010 at 4:52 pm #

      Hello,

      with an extjs datagrid:
      rowcontextmenu: function(grid, index, event){
      event.stopEvent();
      menu = new Ext.menu.Menu({
      items:[
      {text: 'Delete line, iconCls: 'icon-delete'
      , handler:function(){grid.getStore().removeAt(index);}
      }
      ]
      });
      menu.showAt(event.getXY());
      }

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

    5. adminNo Gravatar 1 October 2010 at 12:37 am #

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

    6. jayNo Gravatar 31 March 2011 at 12:52 pm #

      You not provide syntax for that e.g


    Leave a Reply