Affichage du menu sur le menu contextuel Extjs

Question

Jusqu'à 6.2, le menu contextuel sur une grille a bien fonctionné en faisant

itemcontextmenu: function (a,b,c,d, e) { 
 
    contextmenu.showAt(e.getXY()); 
 
}

Mais avec 6,5, le menu ne montre pas à la XY coordonnée donnée si le menu est affiché en dehors du menu contextuel. J'ai inclus un exemple ci-dessous. Quelqu'un a vu ce problème? J'ai essayé d'activer l'option d'animation aussi, mais le menu ne contraint pas dans le panneau, donc quand vous faites un clic droit en bas de la grille, le menu apparaît en bas en dessous du panneau.

Toute entrée est très apprécié

Exemple de travail

1. Faites un clic droit sur une ligne de grille

2. Menu contextuel montre où vous avez cliqué.

exemple non-travail

3. Cliquez sur le bouton Menu (menu affiche en dessous du bouton)

4. Faites un clic droit sur une ligne de grille

5. Le menu contextuel indique où il était affiché sous le bouton Menu au lieu de l'endroit où vous avez cliqué.

var mymenu = new Ext.menu.Menu({ 
 
     items: [ 
 
      // these will render as dropdown menu items when the arrow is clicked: 
 
      {text: 'Item 1', handler: function(){ alert("Item 1 clicked"); }}, 
 
      {text: 'Item 2', handler: function(){ alert("Item 2 clicked"); }} 
 
     ] 
 
    }); 
 
Ext.create('Ext.button.Split', { 
 
    renderTo: Ext.getBody(), 
 
    text: 'Menu Button', 
 
    menu: mymenu 
 
}); 
 
Ext.create('Ext.data.Store', { 
 
    storeId: 'simpsonsStore', 
 
    fields:[ 'name', 'email', 'phone'], 
 
    data: [ 
 
     { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' }, 
 
     { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' }, 
 
     { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' }, 
 
     { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' } 
 
    ] 
 
}); 
 
Ext.create('Ext.grid.Panel', { 
 
    title: 'Simpsons', 
 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
 
    columns: [ 
 
     { text: 'Name', dataIndex: 'name' }, 
 
     { text: 'Email', dataIndex: 'email', flex: 1 }, 
 
     { text: 'Phone', dataIndex: 'phone' } 
 
    ], 
 
    height: 200, 
 
    width: 400, 
 
    renderTo: Ext.getBody(), 
 
    listeners: { 
 
     scope: this, 
 
     itemcontextmenu: function (a,b,c,d,e){ 
 
      e.stopEvent(); 
 
      mymenu.showAt(e.getXY()); 
 
     } 
 
     
 
    } 
 
    
 
});

Answer 1

J'ai fait un violon en 6.2 et il a le même comportement que 6,5

https://fiddle.sencha.com/#view/editor&fiddle/23kn

La question est que vous attribuez le même menu pour menus contextuels sur le bouton de division. Vous devrez détruire et recréer le menu à chaque fois. En outre, vous devriez mettre en cache le menu contextuel sur la grille sinon chaque fois que vous faites un clic droit, vous créez un nouveau menu et l'ancien reste ... une grande fuite de mémoire.

Answer 2

Vous pouvez empêcher les fuites de mémoire comme ceci.

new Ext.grid.Panel({ 
    plugins: 'viewport', 
    title: 'Users', 
    dockedItems: [{ 
     xtype: 'toolbar', 
     dock: 'top', 
     items: [{ 
      xtype: 'splitbutton', 
      text: 'menu', 
      menu: mymenu 
     }] 
    }], 
    store: { 
     data: [{ 
      name: 'Lisa', 
      email: 'lisa@simpsons.com', 
      phone: '555-111-1224' 
     }, { 
      name: 'Bart', 
      email: 'bart@simpsons.com', 
      phone: '555-222-1234' 
     }, { 
      name: 'Homer', 
      email: 'homer@simpsons.com', 
      phone: '555-222-1244' 
     }, { 
      name: 'Marge', 
      email: 'marge@simpsons.com', 
      phone: '555-222-1254' 
     }] 
    }, 
    columns: [{ 
     text: 'Name', 
     dataIndex: 'name' 
    }, { 
     text: 'Email', 
     dataIndex: 'email', 
     flex: 1 
    }, { 
     text: 'Phone', 
     dataIndex: 'phone' 
    }], 
    height: 200, 
    width: 400, 
    listeners: { 
     scope: this, 
     itemcontextmenu: function (a, b, c, d, e) { 
      e.stopEvent(); 
      var mymenu = new Ext.menu.Menu({ 
       items: [ 
       { 
        text: 'Item 1', 
        handler: function() { 
         alert("Item 1 clicked"); 
         } 
       }, { 
         text: 'Item 2', 
         handler: function() { 
          alert("Item 2 clicked"); 
         } 
       } 
      ], 
      listeners:{ 
       hide:function(){ 
        setTimeout(function(){ 
         mymenu.destroy(); 
        },2000); 
       } 
      } 
      }); 
      mymenu.showAt(e.getXY()); 
     } 
    } 
});