2010-07-19 2 views
20

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

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

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

ответ

26

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

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); 
} 
+1

Для ExtJS 6, 'event. xy' следует изменить на 'event.getXY()', иначе он появится в верхнем левом углу. – harryBundles

7

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

+0

спасибо очень – edtsech

+1

Нет информации об определении контекстного меню. Другой ответ намного лучше для моих нужд, и я верю кому-то другому. –

+1

@George: OP уже определил свое контекстное меню в исходном вопросе, и поэтому не нуждался в помощи в этом. Немного хромать, чтобы проголосовать за меня через 14 месяцев после того, как я ответил на вопрос только потому, что вам нравится более свежий ответ лучше. Ничто в моем ответе недействительно или ненадлежащим образом. Фактически, в моем ответе указан конкретный список событий, предлагаемых сеткой для обработки, чего нет у вашего предпочтительного ответа. Каждому из своих, но обычно поданных голосов используется для указания неправильных ответов, а не только для ваших личных предпочтений. Благодарю. –

4

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

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

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

3

должны добавить это свойство в сетке, например:

viewConfig: { 
      stripeRows: true, 
      listeners: { 
       itemcontextmenu: function(view, rec, node, index, e) { 
        e.stopEvent(); 
        contextMenu.showAt(e.getXY()); 
        return false; 
       } 
      } 
     }, 
1
  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()); 
    
    
         } 
    
         }, 
    
Смежные вопросы