How i can create context menu for extjs grid

问题:

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?

回答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);
}

回答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.

回答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.

回答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;
                }
            }
        },

回答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());
   
   
           }
   
           },