Question

直到6.2，网格上下文菜单正常工作

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

但是对于6.5，如果菜单显示在上下文菜单之外，则菜单不会显示在给定的XY坐标处。我在下面列举了一个例子。谁见过这个问题？我也试过打开动画选项，但菜单没有限制在面板内，因此当您右键单击网格底部时，菜单会显示在面板下方的底部。

非常感谢任何输入

工作示例

右键单击任何网格行
上下文菜单显示您点击的位置。

非工作示例

点击菜单按钮（菜单显示按钮下方）
右键单击任何网格行
上下文菜单显示菜单按钮下方显示的位置，而不是您点击的位置。

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

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

2 个答案: