Custom context menus are one of the features of ExtJS that I love. They are stupid simple to add in, and ridiculously customizable–they can really add some value to your app and help preserve real estate if you have a lot of embedded actions that need to happen.

For example, in one of my controllers, I’m looking for the “itemcontextmenu” event on a grid:

    "bookmarks": {
       itemclick: function(...) {
       itemcontextmenu: function(view,record,item,index,e) {
          var me = this;
          var r =;
          if(item.ctxMenu) {
              item.ctxMenu = new{
                 items: [
                       text: "Delete This Thing",
                       icon: "images/delete.png",
                       handler: function(btn) {

One of the issues I was running into, however, was that whenever I would “right” click using my Mac’s “magic mouse” (e.g., Ctrl+click), both the itemclick AND itemcontextmenu events would fire.

To debug this, I took a quick peek at the “event” object passed on both methods. This object provides a bunch of information about the event that was fired, including:

  • any keys that triggered the event
  • whether Ctrl was pressed
  • whether Shift was pressed
  • what “type” of event (e.g., “click” for a mouse event)

Armed with this information, I was able to adjust my “itemclick” listener a bit, to prevent it from loading when a Ctrl+click occurs:

itemclick: function(view,record,item,index,e,options) {
    // only allow event if it's a true right click event; block if ctrl+click
    if(e.type=="click" && e.ctrlKey==false) { my actions...