顯示菜單在上下文菜單的ExtJS

Question

直到6.2，在網格上下文菜單做

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

但隨着6.5工作得很好，菜單不顯示在給定的XY座標如果菜單顯示在上下文菜單之外。我在下面列出了一個例子。任何人看到這個問題？我嘗試打開動畫選項，但是菜單不會在面板內進行約束，所以當您在網格的底部點擊右鍵時，菜單將顯示在面板下方的底部。

任何輸入的高度讚賞

工作實例

1. 右鍵單擊任何網格行

2. 上下文菜單顯示了您點擊。

非工作示例

點擊菜單按鈕（菜單顯示按鈕的下方）

右擊任何網格行

上下文菜單顯示它在菜單按鈕下方顯示的位置，而不是您點擊的位置。

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

我在6.2做了小提琴，它具有完全相同的行爲6.5

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

問題是您分配相同的菜單上下文菜單分割按鈕。您需要每次銷燬並重新創建菜單。另外作爲一個附註，你應該在網格上緩存上下文菜單，否則每次你右鍵單擊你正在創建一個新的菜單，舊的仍然存在......大內存泄漏。

Answer 2

您可以像這樣防止內存泄漏。

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