2010-07-19 10 views
20

für extjs Raster erstellen kann ich Kontextmenü für Baum erstellen und anhängen Ereignis ‚contextmenu‘. Code:Wie ich Kontextmenü

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

Aber wie kann ich Kontextmenü für Rasterelemente erstellen?

Antwort

26

Definieren Sie zunächst Ihre Kontextmenü

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

Dann wird ein Listener für das gewünschte Ereignis erstellen. Es ist sehr wichtig, daran zu denken, das Standardverhalten des Ereignisses zu stoppen, damit Sie es durch Ihr eigenes ersetzen können. Wenn Sie die event.stopEvent() -Methode nicht aufrufen, um das Bubbling des Ereignisses zu stoppen, wird das Standardkontextmenü des Browsers angezeigt, unabhängig davon, was Sie tun.

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

Für ExtJS 6, 'Veranstaltung. xy 'sollte in' event.getXY() 'geändert werden, andernfalls wird es in der oberen linken Ecke angezeigt. – harryBundles

7

Nun, je nachdem, was Sie tun möchten, können Sie die folgenden GridPanel Ereignisse in der gleichen Weise wie Ihr Beispiel handhaben: contextmenu, cellcontextmenu, containercontextmenu, groupcontextmenu, headercontextmenu, rowbodycontextmenu oder rowcontextmenu.

+0

Ihnen danken sehr viel – edtsech

+1

Keine Informationen zum Definieren des Kontextmenüs. Andere Antwort viel besser für meine Bedürfnisse, und ich glaube, jemand anderes. –

+1

@George: Das OP hatte sein Kontextmenü bereits in der ursprünglichen Frage definiert und brauchte damit keine Hilfe. Es ist ein bisschen lahm, mich 14 Monate nach der Beantwortung der Frage ablehnen zu lassen, nur weil du eine jüngere Antwort lieber magst. Nichts an meiner Antwort ist in irgendeiner Weise ungültig oder unpassend. Tatsächlich bietet meine Antwort die spezifische Liste der Ereignisse, die vom Grid zur Verfügung gestellt werden, was Ihre bevorzugte Antwort nicht tut. Zu jedem werden seine eigenen, aber typischerweise nach unten gerichteten Stimmen verwendet, um falsche Antworten anzuzeigen, nicht nur Ihre persönlichen Vorlieben. Vielen Dank. –

4

Für extjs4, fügen Sie diese in Ihrem Raster:

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

Mit dem gleichen Menü Kontext wie Alan oben zur Verfügung gestellt.

3

haben diese Eigenschaft in Ihrem Raster zum Beispiel hinzuzufügen:

viewConfig: { 
      stripeRows: true, 
      listeners: { 
       itemcontextmenu: function(view, rec, node, index, e) { 
        e.stopEvent(); 
        contextMenu.showAt(e.getXY()); 
        return false; 
       } 
      } 
     }, 
1
  1. eine Dateisteuerung erstellen
  2. erstellen Ansicht Datei

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