the singularity of being and nothingness
ItemClick and ItemContextMenu
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... } }
Print article | This entry was posted by existdissolve on July 8, 2011 at 4:18 am, and is filed under ExtJS. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |