CODEWITHSUNDEEP
extjs
Arpit Vaishnav
Arpit Vaishnav

Reputation: 4780

extjs tree panel context menu not working

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 ?

Upvotes: 11

Views: 12483

Answers (2)

Molecular Man
Molecular Man

Reputation: 22386

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

Upvotes: 21

Armance
Armance

Reputation: 5390

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]);


        }
}

Upvotes: 1

Related Questions