Ext.menu.Menu (Контекстное меню) отображается только один раз при щелчке правой кнопкой мыши - Ext JS 4.2.1

У меня есть древовидная сетка, и я показываю контекстное меню при щелчке правой кнопкой мыши. Я создаю меню в событии itemContextMenu представления сетки дерева.

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

Я не знаю, что не так. Я просто хочу, чтобы простое контекстное меню работало.

Помощь будет высоко оценена.

Вот мой код:

Панель дерева:

Ext.define('MyApp.view.MainPanel', {
extend: 'Ext.panel.Panel',

height: 361,
width: 681,
layout: {
    type: 'absolute'
},
title: 'Main Panel',
initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'treepanel',
                height: 335,
                width: 475,
                title: 'Tree Grid Panel',
                store: 'TreeStore',
                displayField: 'kstand',
                rootVisible: false,
                useArrows: true,
                viewConfig: {
                    listeners: {
                        itemcontextmenu: {
                            fn: me.onViewItemContextMenu,
                            scope: me
                        }
                    }
                },
                columns: [
                    {
                        xtype: 'treecolumn',
                        width: 237,
                        sortable: false,
                        dataIndex: 'kstand',
                        text: 'Kstand',
                        flex: 1
                    },
                    {
                        xtype: 'gridcolumn',
                        sortable: false,
                        dataIndex: 'name',
                        text: 'Name'
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
},

onViewItemContextMenu: function(dataview, record, item, index, e, eOpts) {
    e.stopEvent();
    var contextMenu = Ext.create('MyApp.view.TreeContextMenu');
    contextMenu.showAt(e.getXY());
}

});

Контекстное меню:

Ext.define('MyApp.view.TreeContextMenu', {
extend: 'Ext.menu.Menu',

hidden: true,
hideMode: 'display',
id: 'TreeContextMenu',
width: 138,
frameHeader: false,
initComponent: function() {
    var me = this;
    Ext.applyIf(me, {
        items: [
            {
                xtype: 'menuitem',
                id: 'AddTask',
                icon: '/Images/Addblue.png',
                text: 'Add Task',
                tooltip: 'Add Task'
            },
            {
                xtype: 'menuitem',
                id: 'EditTask',
                icon: '/Images/edit.png',
                text: 'Edit Task',
                tooltip: 'Edit selected task'
            }
        ]
    });
    me.callParent(arguments);
}

});

введите здесь описание изображения

введите здесь описание изображения


person Harshrossi    schedule 12.06.2013    source источник


Ответы (1)


Потому что вы каждый раз создаете новый экземпляр меню, что означает: а) утечку памяти б) повторяющийся идентификатор компонента

Итак, удалите идентификатор из определения класса, он вам не нужен. Во-вторых, создайте меню только один раз:

onViewItemContextMenu: function(dataview, record, item, index, e, eOpts) {
    e.stopEvent();
    if (!this.menu) {
        this.menu = Ext.create('MyApp.view.TreeContextMenu');
    }
    this.menu.showAt(e.getXY());
}
person Evan Trimboli    schedule 12.06.2013