Отображение меню в контекстном меню 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: '[e-mail]', phone: '555-111-1224' },
        { name: 'Bart', email: '[e-mail]', phone: '555-222-1234' },
        { name: 'Homer', email: '[e-mail]', phone: '555-222-1244' },
        { name: 'Marge', email: '[e-mail]', 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/

Проблема в том, что вы назначаете одно и то же меню для контекстных меню кнопке разделения. Вам нужно будет уничтожить и воссоздать меню каждый раз. Также в качестве примечания вы должны кэшировать контекстное меню в сетке, иначе каждый раз, когда вы щелкаете правой кнопкой мыши, вы создаете новое меню, а старое все еще остается... большая утечка памяти.

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: '[e-mail]',
            phone: '555-111-1224'
        }, {
            name: 'Bart',
            email: '[e-mail]',
            phone: '555-222-1234'
        }, {
            name: 'Homer',
            email: '[e-mail]',
            phone: '555-222-1244'
        }, {
            name: 'Marge',
            email: '[e-mail]',
            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());
        }
    }
});