Adding a context menu to grid rows

2. We now instantiate an Ext.menu.Menu object and configure it with a height, width,
and a collection of Ext.menu.Items that will be our action buttons:

var contextMenu = Ext.create('Ext.menu.Menu', {
height: 100,
width: 125,
items: [{
text: 'View Invoice',
icon: 'icons/document-text.png'
}, {
text: 'Edit Invoice',
icon: 'icons/pencil.png'
}, {
text: 'Re-Send Invoice',
icon: 'icons/envelope-label.png'
}, {
text: 'Delete Invoice',
icon: 'icons/minus-circle.png'
}]
});

3. We can now hook the right-click event of the grid to a function that will show our
menu. This event is named itemcontextmenu and will fire when a grid row is
right-clicked.

4. We add a handler by using the grid's on method and make two method calls
inside it. The first, stopEvent, prevents the right-click event from showing the
browser's native context menu; and the second displays our menu at the position
the right-click occurred:

invoicesGrid.on({
itemcontextmenu: function(view, record, item, index, e){
e.stopEvent();
contextMenu.showAt(e.getXY());
}
});