extjs 创建简单Meun,实现在TreePanel上面右键.

本文提供了一个使用Ext.js库创建简单菜单和树面板的示例,包括菜单项、子菜单、文件菜单选项及树节点的创建。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/**  
   创建简单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);//创建动态树  

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值