2010-07-19 27 views
20

Puedo crear un menú contextual para árbol y adjuntarlo al evento 'contextmenu'. Código:Cómo puedo crear un menú contextual para la cuadrícula 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()); 
}) 

Pero, ¿cómo puedo crear menú contextual de elementos de la red?

Respuesta

26

En primer lugar definir su menú contextual

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

A continuación, cree un detector para el evento deseado. Es muy importante recordar detener el comportamiento predeterminado del evento para que pueda reemplazarlo por el suyo. Si no llama al método event.stopEvent() para detener el burbujeo del evento en adelante, aparecerá el menú contextual predeterminado del navegador independientemente de lo que haga.

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

para ExtJS 6, 'evento. xy' debe cambiarse a 'event.getXY()' de lo contrario aparecerá en la esquina superior izquierda. – harryBundles

7

Bueno, dependiendo de lo que quiere hacer que puede manejar las siguientes GridPanel acontecimientos de la misma manera que el ejemplo: contextmenu, cellcontextmenu, containercontextmenu, groupcontextmenu, headercontextmenu, rowbodycontextmenu o rowcontextmenu.

+0

muchas gracias – edtsech

+1

No hay información sobre la definición del menú contextual. Otra respuesta es mucho mejor para mis necesidades, y creo que la de los demás. –

+1

@George: OP ya había definido su menú contextual en la pregunta original, por lo que no necesitaba ayuda con eso. Es un poco tonto votarme por votación 14 meses después de haber respondido la pregunta simplemente porque te gusta más una respuesta más reciente. Nada sobre mi respuesta es inválido o impropio de ninguna manera. De hecho, mi respuesta proporciona la lista específica de eventos que ofrece la cuadrícula para manejar, que su respuesta preferida no ofrece. Cada uno es suyo, pero normalmente los votos hacia abajo se utilizan para indicar respuestas incorrectas, no solo sus preferencias personales. Gracias. –

4

Para extjs4, añadir esto en su cuadrícula:

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

Con el mismo contexto menú como Alan proporcionado anteriormente.

3

tienen que añadir esta propiedad en su parrilla por ejemplo:

viewConfig: { 
      stripeRows: true, 
      listeners: { 
       itemcontextmenu: function(view, rec, node, index, e) { 
        e.stopEvent(); 
        contextMenu.showAt(e.getXY()); 
        return false; 
       } 
      } 
     }, 
1
  1. Crear un archivo de controlador de
  2. Crear un archivo Ver

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