将上下文菜单动态添加到 Ext.tree.TreePanel

Question

我正在尝试将动态创建的上下文菜单添加到 Ext.tree.TreePanel 对象。菜单将根据用户的选择而有所不同。

我可以在 treePanel 描述符之外创建菜单，但如何将动态创建的菜单附加到 Ext.tree.TreePanel？文档似乎表明 treePanel.on(nameOfMenuHere) 会附加菜单，但它 returns 未定义。

     var menu1 = new Ext.menu.Menu({
     id: 'menu1',
         items: [{
             id: 'menu1-item1',
             text: 'Menu 1 - Item 1'
         }, 
                    {
                    id: 'menu1-item2',
                    text: 'Menu 1 - Item 2'
                }],
                listeners: {
                  itemclick: function (item) {
                     switch (item.id) {
                       case 'menu1-item1':
                          var n = item.parentMenu.contextNode;
                         if (n.parentNode) {
                alert(n.parentNode.text); 
                alert("node ID: " + n.id + ", node text: " + n.text); //Ext ID and text of selected node
                   } 
                    break;
            }
        } 
    }
}); 

userLayerTree.on(menu1);

Answer 1

在树面板中使用侦听器 itemcontextmenu。这样的东西应该可以工作。

var tpanel = {
    xtype : 'treepanel',
    width: 250,
.........
..........
listeners : {
        itemcontextmenu: showLyrContextMenu
        }
}

然后创建函数来创建和显示您的菜单

function showLyrContextMenu(view, record, item, index, event){
lyrTreeContextMenu =  new Ext.menu.Menu({
      id : 'lyrcontxtmenu',
      .......
     items: items
      });
      lyrTreeContextMenu.showAt(event.getXY());
      event.stopEvent();
}

将上下文菜单动态添加到 Ext.tree.TreePanel

Dynamically Add contextmenu to Ext.tree.TreePanel

tree

extjs

contextmenu