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:

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

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) {
       ....do my actions...
    }
}