Как я могу создать контекстное меню для сетки Extjs

Question

Я могу создать контекстное меню для дерева и прикрепить к событию contextmenu.Код:

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

Но как мне создать контекстное меню для элементов сетки?

Answer 1

Сначала определите ваше контекстное меню

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

Затем создайте прослушиватель для желаемого события.Очень важно помнить, чтобы остановить стандартное поведение события, чтобы вы могли заменить его своим собственным.Если вы не вызываете метод event.stopEvent (), чтобы остановить всплывающее событие, то контекстное меню браузера по умолчанию будет отображаться независимо от того, что вы делаете.

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

Answer 2

Ну, в зависимости от того, что вы хотите сделать, вы можете обрабатывать следующие GridPanel события так же, как ваш пример: contextmenu , cellcontextmenu , containercontextmenu , groupcontextmenu , headercontextmenu , rowbodycontextmenu или rowcontextmenu .

Answer 3

Для extjs4, добавьте это в свою сетку:

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

С тем же контекстом меню, что и Алан, представленный выше.

Answer 4

необходимо добавить это свойство в вашу сетку, например:

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

Answer 5

1. Создание файла контроллера

2. Создание файла вида

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