您的位置:首页 > 其它

Flex4 添加鼠标右键于Tree

2015-09-14 11:29 330 查看
今天应项目需求,开发制作一个给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>


结果为:

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

其基本思路为:

1,在FLEX中利用外部接口注册一个函数, 作为接收外部(HTML)右键事件的入口

2,在FLEX应用所在的HTML中拦截鼠标右键事件,调用FLEX外部函数,并取消事件的广播,以阻止事件到达FLEX应用.

3,在FLEX应用程序上监听事件,并记录当前鼠标所在对象

4,当入口函数接收到HTML发送的右键事件后,模拟生成一个鼠标右键事件(buttonDown = false), 并发送到当前对象

5,在对象的处理函数中,根据buttonDown的标志,分别处理鼠标左右键事件
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: