How i can create context menu for extjs grid

Question

I can create context menu for tree and attach to 'contextmenu' event. Code:

contextMenu = new Ext.menu.Menu({
  items: [{
    text: 'Edit',
    iconCls: 'edit',
    handler: edit
  },...]
})

Ext.getCmp('tree-panel').on('contextmenu', function(node) {
  contextMenu.show(node.ui.getAnchor());
})

But how I can create context menu for grid elements?

Answer 1

First define your context menu

mnuContext = new Ext.menu.Menu({
    items: [{
        id: 'do-something',
        text: 'Do something'
    }],
    listeners: {
        itemclick: function(item) {
            switch (item.id) {
                case 'do-something':
                    break;
            }
        }
    }
});

Then create a listener for the desired event. It is very important to remember to stop the event's default behaviour so you can replace it with your own. If you don't call the event.stopEvent() method to stop the event bubbling onwards then the brower's default context menu will appear regardless of what you do.

rowcontextmenu: function(grid, index, event){
     event.stopEvent();
     mnuContext.showAt(event.xy);
}

Answer 2

Well, depending on what you want to do you can handle the following GridPanel events in the same manner as your example: contextmenu, cellcontextmenu, containercontextmenu, groupcontextmenu, headercontextmenu, rowbodycontextmenu or rowcontextmenu.

Answer 3

For extjs4, add this in your grid:

listeners: {
  itemclick: function(view, record, item, index, e, options){
    menuContext.showAt(e.xy);
  }
}

With the same menu context as Alan provided above.

Answer 4

have to add this property in your grid for example :

viewConfig: {
            stripeRows: true,
            listeners: {
                itemcontextmenu: function(view, rec, node, index, e) {
                    e.stopEvent();
                    contextMenu.showAt(e.getXY());
                    return false;
                }
            }
        },

Answer 5

1. Create a controller file

2. Create a View file

       init : function() {
           this.control(
   
                      'countrylist' : {
   
                           itemcontextmenu : this.contextMenuBox
   
                       }
                   });
           },
   
           contextMenuBox:function( view, record, item, index,  e, eOpts ){
   
   
   if(record.data.status=='Y'){
   
   var menu = Ext.create('Ext.menu.Menu',{
               items: [{
                           text: 'Do something'
                       }]
                       });
                       e.stopEvent();
                       menu.showAt(e.getXY());
   
   
           }
           else{
               var menu = Ext.create('Ext.menu.Menu',{
               items: [{
                           text: 'Don\'t'
                       }]
                       });
                       e.stopEvent();
                       menu.showAt(e.getXY());
   
   
           }
   
           },