extjs tree panel context menu not working

Question

var menu1 = new Ext.menu.Menu({
    items: [{
        text: 'Open in new tab'

    }]
});
var treePanel = Ext.create('Ext.tree.Panel', {
    id: 'tree-panel',
    region: 'center',
    useArrows: true,
    singleExpand: true,
    split: false,
    height: 360,
    minSize: 150,
    rootVisible: false,
    autoScroll: true,
    store: store,
    border: false,
    columns: [{
        xtype: 'treecolumn',
        dataIndex: 'text',
        flex: 2,
        sortable: true,
        displayField: true
    }]

});
treePanel.on('contextmenu', function(event, node) {
    alert(node)
    //treePanelCurrentNode = node;
    x = event.browserEvent.clientX;
    y = event.browserEvent.clientY;
    menu1.showAt([x, y]);
}, this);

Working on 4.1 ext js and trying to add context menu to this tree panel but menu is not working. In the tree panel store is coming but my code

treePanel.on('contextmenu', function(event,node){};

is not working not event

treePanel.on('click', function(event,node){};

Any idea related to ext js context menu on tree panel ?

score 21 · Accepted Answer · edited Apr 16 '18 at 10:44

21

Tree doesn't have contextmenu event in ExtJS4.

You should use itemcontextmenu instead of contextmenu:

treePanel.on('itemcontextmenu', function(view, record, item, index, event) {
    alert(record)
    //treePanelCurrentNode = record;
    menu1.showAt(event.getXY());
    event.stopEvent();
}, this);

edited Apr 16 '18 at 10:44

Narendra Jadhav

10,052
15
33
44

answered Oct 17 '11 at 10:59

Molecular Man

22,277
3
72
89

im trying to do the same, but this doesnt work properly, the menu is displayed but its covered with the browser default menu and the alert shows [object Object], thanks – Armance Oct 18 '11 at 17:44
4

@astrocybernaute, updated my answer(added `event.stopEvent` which prevents browser default menu from showing). Regarding to [object Object]: what does alert have to show? Alert shows object variables this way. Use console.log to see what is in record. – Molecular Man Oct 18 '11 at 18:14

score 1 · Answer 2 · answered Oct 18 '11 at 17:59

When the data view is rendered it disabling the default right click web browser menu, this is called in listeners “render” event and “itemcontexmenu” event is for detecting right click mouse event, capture the mouse cursor position and displaying the menu.

  listeners: {


        render: function() {
             Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
        },
        itemcontextmenu : function( grid, record, item, index, event){
            x = event.browserEvent.clientX;
            y = event.browserEvent.clientY;

            menu1.showAt([x, y]);


        }
}

extjs tree panel context menu not working

2 Answers2

Linked