extjstreecontextmenu

Dynamically Add contextmenu to Ext.tree.TreePanel


I am trying to add dynamically created contextmenu's to an Ext.tree.TreePanel object. The menus will all be different depending on user selections.

I can create the menu outside the treePanel descriptor but how can I append the dynamically created menu to the Ext.tree.TreePanel? The documentation seems to indicate that treePanel.on(nameOfMenuHere) would append the menu but it returns as undefined.

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);
                        //Ext ID and text of selected node
                        alert("node ID: " + n.id + ", node text: " + n.text);
                    }
                break;
            }
        } 
    }
}); 

userLayerTree.on(menu1);

Solution

  • use the listener itemcontextmenu within the tree panel. something like this should work.

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

    and then create the function to create and show your menu

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