extjs - 在上下文菜单 Extjs 上显示菜单

Question

直到 6.2，网格上的上下文菜单都可以正常工作

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

但是在 6.5 中，如果菜单显示在上下文菜单之外，则菜单不会显示在给定的 XY 坐标处。我在下面提供了一个示例。有人见过这个问题吗？我也尝试过打开动画选项，但菜单并没有限制在面板内，所以当您在网格底部单击鼠标右键时，菜单会显示在面板下方的底部。

非常感谢任何输入

工作示例

1. 右键单击任何网格行

2. 上下文菜单显示您单击的位置。

非工作示例

3. 单击菜单按钮（菜单显示在按钮下方）

4. 右键单击任何网格行

5. 上下文菜单显示它显示在菜单按钮下方的位置，而不是您单击的位置。

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