Flex4 添加鼠标右键于Tree

╰半橙微兮° 2022-08-05 10:29 128阅读 0赞

今天应项目需求，开发制作一个给Tree添加右键菜单的功能，右键菜单的原理为：新建一个ContextMenu类；修改ContextMenu对象的item属性；将这个对象赋给一个控件。

实现起来代码很简单，但是效果不是太好，废话不多说，先上代码。

<?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    			   xmlns:s="library://ns.adobe.com/flex/spark" 
    			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    	<fx:Declarations>
    		  
    	</fx:Declarations>
    	
    	<fx:Script>
    		<![CDATA[
    			import mx.controls.Alert;
    			
    			public var newBuildMenuItem:ContextMenuItem;
    			
    			[Bindable]
    			private var dataList:Array=new Array({"treename":"看看"},{"treename":"试试"});
    			
    			
    			private function init():void 
    			{     
    				createTreeMenuItem();     
    				tree.contextMenu = getTreeContxtMenu();     
    			} 
    			
    			/**
    			 * 菜单项创建函数，并添加菜单监听器  
    			 *  */
    			public function createTreeMenuItem(): void
    			{     
    				newBuildMenuItem = new ContextMenuItem("查看表单",false,true,true);     
    				newBuildMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, newBuildHandler);     
    			}     
    			
    			/**
    			 * 将菜单项目添加到菜单中 
    			 * */
    			private function getTreeContxtMenu():ContextMenu 
    			{     
    				var contextMenu: ContextMenu = new ContextMenu();   
    				contextMenu.hideBuiltInItems();     
    				contextMenu.customItems.push(newBuildMenuItem);     
    				return contextMenu;     
    			}  
    			/**
    			 * 点击菜单执行函数  
    			 *  */
    			public function newBuildHandler(event:Event):void
    			{  
    				Alert.show("这是新建的菜单点击后执行的函数");  
    			}  
    		]]>
    	</fx:Script>
    	<mx:Tree id="tree" x="10" y="9" width="277" height="504" creationComplete="init()" dataProvider="{dataList}" labelField="treename"></mx:Tree>	
    </s:Application>

结果为：

![Image 1][]

以上结果中看到，除了我添加的查看表单按钮外，还有其他自带的右键菜单项。想将这些右键菜单项屏蔽掉，去网上找，有位博友的思路不错，就是稍显繁琐，分享如下：

其基本思路为:  
  
1,在FLEX中利用外部接口注册一个函数, 作为接收外部(HTML)右键事件的入口  
2,在FLEX应用所在的HTML中拦截鼠标右键事件,调用FLEX外部函数,并取消事件的广播,以阻止事件到达FLEX应用.  
3,在FLEX应用程序上监听事件,并记录当前鼠标所在对象  
4,当入口函数接收到HTML发送的右键事件后,模拟生成一个鼠标右键事件(buttonDown = false), 并发送到当前对象  
5,在对象的处理函数中,根据buttonDown的标志,分别处理鼠标左右键事件

[Image 1]: