extjsは簡単なMeunを作成して、TreePanelの上の右ボタンを実現します.

2316 ワード

/**  
       Menu  
 */  
function createMenu(){   
    //         
    var myMenu = new Ext.menu.Menu({   
        items:[{   
            text: '      1',   
            menu: [{   
                text: '     1'  
            },{   
                text: '     2'  
            }]   
        },{   
            text: '      2'  
        }]   
    }) ;   
       
    //       N      ,      ,           (            ).   
    var vRoot = new Ext.tree.TreeNode({text: '   1'}) ;//       
    var vNode1 = new Ext.tree.TreeNode({text: '   1'}) ;//       
    vNode1.appendChild(new Ext.tree.TreeNode({text: '   11'}));   
    vNode1.appendChild(new Ext.tree.TreeNode({text: '   12'}));   
    var vNode2 = new Ext.tree.TreeNode({text: '   1'}) ;//       
    vRoot.appendChild(vNode1) ;// vRoot         .   
    vRoot.appendChild(vNode2) ;// vRoot         .   
       
    var obj = {   
        title: '  Menu  ',   
        renderTo: document.body,   
        height: 300,   
        width: 600,   
        root: vRoot,   
        tbar:[{   
            text: '  ',   
            menu: {items:[{   
                text: '  ',   
                icon: '../images/open.gif'  
            },{   
                text: '  ',   
                icon: '../images/save.gif'  
            },'-',{   
                text: '   ...',   
                handler: function(b){   
                    var win = new Ext.Window({   
                        title: '      ',   
                        width: 200,   
                        height: 200,   
                        html: '           '  
                    });   
                    win.show() ;   
                }   
            }]}   
        },'-',{//                 
            text: '  '  
        },'->',{//     '  '     
            text: '  '  
        }],   
        listeners: {//     ,    Tree      myMenu   
            contextmenu: function(n,e){   
                myMenu.showAt(e.getXY()) ;   
            }   
        }   
    };   
    var myPanel = new Ext.tree.TreePanel(obj) ;   
}   
Ext.onReady(createMenu);//