ExtJS provides some powerful grid functionality with their Ext.grid package, and part of this functionality includes custom context menus that provide an intuitive method of interaction with grid rows. I found that there was no documentation on how to create these menus, so I thought I would put together a quick tutorial. I’m assuming that users have a basic understanding of ExtJS, and the version I am using as a demonstration is ExtJS 3.4.

Assuming you already have a grid panel (Ext.grid.GridPanel or Ext.grid.EditorGridPanel) setup, we need to add in an event listener to help with our context menu creation. Ext.grid.GridPanel has several listeners available to help with this, these are

• rowbodycontextmenu
• rowcontextmenu

Both of these events are fired when the user right-clicks on a row in the grid, but the first of them requires the optional config enableRowBody being set to true in the grid’s GridView. We will use the latter, as we’re assuming that we’re not in need of any special grid row manipulation (hooking into both of these events would prove a better option if you’re using the enableRowBody config). Our Ext.grid.GridPanel code may now look something like this…

var grid = new Ext.grid.GridPanel({
   border: false,
   title: 'Sample Grid',
   loadMask: true,
   viewConfig: {
       forceFit: true,
       autoFill: true
   },
   ds: new Ext.data.JsonStore({ ... }),
   cm: new Ext.grid.ColumnModel({ ... }),
   sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
   listeners: {
       'rowcontextmenu' : function(grid, index, event) {
            //do something
       }
   }
});

You may notice that we’ve added three arguments to our rowcontextmenu event handler function. These are

• grid – The Ext.grid.GridPanel that we’re tying into
• index – The row index that we right-clicked on
• event – The right-click event object, containing useful information about what we right clicked

The next step is to create a function that will generate our context menu when we perform the right click, obviously this will be called from within our rowcontextmenu event handler. In our menu we will add items that will alert some information from our grid’s store. This will look something like below…

function showMenu(grid, index, event) {
      event.stopEvent();
      var record = grid.getStore().getAt(index);
      var menu = new Ext.menu.Menu({
            items: [{
                text: 'Show Job ID',
                handler: function() {
                    alert(record.get('job_id'));
                }
            }, {
                text: 'Show Customer',
                handler: function() {
                    alert(rec.get('customer_name'));
                }
            }]
        }).showAt(event.xy);
}

Firstly, we create an Ext.menu.Menu object that will contain our menu items, and then we add our items in line by using the items config. The last part of this function uses the showAt method on our menu object. This tells ExtJS to show the menu at a specific set of X and Y coordinates as specified in our click event. The last thing for us to do is tie our function into the event handler we specified on our grid earlier…

listeners: {
    'rowcontextmenu' : function(grid, index, event) {
         showMenu(grid, index, event);
    }
}

Now when we right click on our grid’s data, we should see something similar to this…

A sample ExtJS right-click context menu

Whilst this is a simple example of context menus, it provides a very quick insight into how easy it is to achieve desktop-like experiences using ExtJS. If you have any questions, don’t hesitate to get in touch.