extjs树面板上下文菜单不起作用答案

【问题标题】：extjs tree panel context menu not workingextjs树面板上下文菜单不起作用
【发布时间】：2011-10-17 10:39:50
【问题描述】：

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

正在使用 4.1 ext js 并尝试将上下文菜单添加到此树形面板，但菜单不起作用。中树面板店来了但我的代码

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

不工作不是事件

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

关于树面板上的 ext js 上下文菜单的任何想法？

【问题讨论】：

标签： extjs

【解决方案1】：

Tree 在 ExtJS4 中没有 contextmenu 事件。

您应该使用itemcontextmenu 而不是contextmenu：

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

【讨论】：

我正在尝试做同样的事情，但这不能正常工作，菜单显示但它被浏览器默认菜单覆盖，并且警报显示 [object Object]，谢谢
@astrocybernaute，更新了我的答案（添加了event.stopEvent，这会阻止浏览器默认菜单显示）。关于 [object Object]：alert 必须显示什么？警报以这种方式显示对象变量。使用 console.log 查看记录的内容。

【解决方案2】：

当渲染数据视图时，它会禁用默认的右键单击网络浏览器菜单，这在侦听器中调用“render”事件，“itemcontexmenu”事件用于检测右键单击鼠标事件，捕获鼠标光标位置并显示菜单.

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


        }
}

【讨论】：