显示菜单在上下文菜单的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()); 
     } 
    } 
});