为EXT tree 树菜单添加右键菜单时出现重复菜单问题

最新推荐文章于 2017-09-21 17:49:16 发布

原创最新推荐文章于 2017-09-21 17:49:16 发布 · 942 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#tree #ext #function #border

EXT 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在使用EXT框架进行前端开发时，遇到树菜单连续点击导致出现重复菜单选项的问题，并通过分析代码，找到了问题所在——即每次点击后未销毁原有菜单，从而在基础上再次添加了菜单。文中提供了解决方案，帮助开发者避免类似问题。

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

今天在做项目的时候用到树菜单。因为项目是用EXT 做的前端。而今天在为一个树菜单添加右键菜单的时候，发现连续点击后出现重复菜单选项

如图：第一次点击,菜单正常：

第二次点击：出现两次添加网点的菜单。

纠结了一上午。才发现每次点击之后没有销毁菜单。所以每次进行点击之后在原先的基础上再添加了一次！

看代码：

   var root=new Ext.tree.AsyncTreeNode({ 
              id: '0',         
              text: '省会',           
              expanded: true       
               });	
			   
   var dTree = new Ext.tree.TreePanel({    
       id: 'myDynamicTree',         
       title: '区域', 
       border:false, 
       rootVisible : false,     
       autoWidth: true, 
       autoHeight: true,      
       collapsible: true,             
       autoScroll:true,       
       loader: new Ext.tree.TreeLoader({ 
                   dataUrl: "/Util/Tree.aspx"       
                   }),        
       root: root,  
       listeners: { 'click': function(node, e) 
        {                            
            store.setBaseParam('ID', node.id);
            store.load({
			            params: {
			             start: 0, 
			             limit: 20}
			          });         
         }       
         }   
        });
        
    //定义右键菜单
     
     dTree.on("contextmenu", rightclickFuntion);
    function rightclickFuntion(node, e)
     {
               e.preventDefault();
               rightClick = new Ext.menu.Menu({
               id :'rightClickCont',
               closeAction:'hide',
               items : [{
               id:'rMenu1',
               icon:'/Images/icons/add.png',
               text : '添加网点',
               //增加菜单点击事件
               handler:function(){
                     
                     Customer.show();
                     Ext.getCmp('Area').setValue(node.text);
                    }
        }]
     });
            rightClick.showAt(e.getXY())
            //以下进行销毁
             rightClick.on("beforehide",function(e){
                 this.destroy();        
               }); 
 }