Flex4自定义右键菜单

(2011-01-26 12:03:34)

转载▼

标签：

flex

自定义

右键

菜单

tree

图标

分类： Flex

注：本文参考了以下文章，经修改完成

http://leopard0825.iteye.com/blog/510028

http://www.360doc.com/content/11/0118/08/4107569_87280841.shtml

第一步：到http://rightclickmanager.googlecode.com/下载rightclickmanager-source-lib-0.1.rar并引入自己的FLEX工程，这是实现右键点击事件，及完全屏闭系统右键菜单的关键！（将src目录下的com复制到自己的Flex工程中即可，mx不用复制到自己的工程中）

第二步：

修改RightClickManager.as文件的

static private var rightClickTarget:*;

再修改两个该文件的两个函数：

static private function mouSEOverHandler(event:MouseEvent) : void

{

rightClickTarget = InteractiveObject(event.target);

return;

}

function dispatchRightClickEvent() : void

{

var event:ContextMenuEvent;

if (rightClickTarget != null)

{

event = new ContextMenuEvent(RIGHT_CLICK, true,255); font-size:10pt">false,rightClickTarget asInteractiveObject,255); font-size:10pt">as InteractiveObject);

rightClickTarget.dispatchEvent(event);

}// end if

return;

}

修改RightClickManager的事件从MouseEvent改为ContextMenuEvent是为了能在列表控件DataGrid\Tree\List上点右键时自动选择当前行，使用了ContextMenuEvent事件中的 event.mouseTarget和列表控件的IListItemRenderer接口！

第三步：打开自己的Flex工程下的html-template文件夹下的index.template.html文件（右击-Open With-Text Editor），在var params = {};语句的下面添加下面的语句：

params.wmode = "opaque";//屏蔽系统右键菜单的关键

第四步：在主程序文件中引入：

（注：写在

<fx:Script>

<![CDATA[

]]>

</fx:Script>

的里面）

import com.siloon.plugin.rightClick.RightClickManager;

[Event(name="rightClick",type="flash.events.ContextMenuEvent")]

//右键菜单的图标

[Embed("images/menu_SP_add.png")]

private var menu_SP_add:Class;

["images/menu_TZ_add.png")]

var menu_TZ_add:Class;

["images/menu_Folder_add.png")]

var menu_Folder_add:Class;

["images/menu_FJ_uploadsingle.png")]

var menu_FJ_uploadsingle:Class;

……

protected var rightClickRegisted:Boolean = false;

var menu:Menu;

第五步：

在init函数中加入如下语句：

（注：init函数即程序的初始化函数

<mx: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"

creationComplete="init();" layout="absolute"

minWidth="1000" minHeight="650" xmlns:local="*">

）

if (!rightClickRegisted)

{

RightClickManager.regist();

rightClickRegisted = true;

}

tree.addEventListener(RightClickManager.RIGHT_CLICK,treeRightClickHandler);

再添加如下函数：

//mx:Tree控件右击事件

function treeRightClickHandler(event:ContextMenuEvent):void

{

tree_onRightClicked(event);

tree_removeMenu();

tree_InitMenu();

}

//mx:Tree控件右击自动选择

function tree_onRightClicked(e:ContextMenuEvent):void

{

var rightClickItemRender:IListItemRenderer;

var rightClickIndex:int;

if(e.mouseTarget is IListItemRenderer)

{

rightClickItemRender = IListItemRenderer(e.mouseTarget); }

else if(e.mouseTarget.parent is IListItemRenderer)

{

rightClickItemRender = IListItemRenderer(e.mouseTarget.parent);

}

if(rightClickItemRender != null)

{

rightClickIndex = tree.itemRendererToIndex(rightClickItemRender);

if(tree.selectedindex != rightClickIndex)

{

tree.selectedindex = rightClickIndex;

}

//删除右键菜单

function tree_removeMenu():void

{

if(menu!=null)

{

menu.hide();

menu.removeEventListener(MenuEvent.ITEM_CLICK,tree_MenuItemSelected);

menu=null;

}

//生成右键菜单

function tree_InitMenu():void

{

menu = Menu.createMenu(this,tree_createMenuItems(),255); font-size:10pt">false);

menu.iconField="itemIcon";//右键菜单的图标

menu.labelField="label"; //右键菜单的名称

menu.variableRowHeight = true;

menu.addEventListener(MenuEvent.ITEM_CLICK,tree_MenuItemSelected); //右键菜单的事件

var point:Point = new Point(mouseX,mouseY);

point = localToGlobal(point);

menu.show(point.x,point.y); //显示右键菜单

}

//生成菜单项，菜单项是根据右击时自动选择的树的节点的深度和属性动态生成的，所选择的树的节点的深度和属性不同则生成的菜单项不同。（GetRootNode是获取根节点的函数，FascRightMenu等函数用于生成对应的菜单项）

function tree_createMenuItems():Array

{

var menuItems:Array = new Array();

var menuItem:Object;

menuItem = new Object;

menuItem.label = '刷新'; //菜单项名称

menuItem.itemIcon = this.menu_SX;//菜单项图标

menuItems.push(menuItem);

var currentItem:XML=tree.selectedItem as XML;

var depth:Number=GetDepth(currentItem);

if(depth==0)

{

if(GetRootNode(currentItem).attribute("tag").toString()=="gyfasctz"||GetRootNode(currentItem).attribute("myfasctz"||GetRootNode(currentItem).attribute("szfasctz")

{

FascRightMenu(menuItems);//生成对应菜单项

}

else

{

LctypeRightMenu(menuItems);

}

if(depth==1)

{

……

}

……

return menuItems;

}

//生成具体菜单项

function FascRightMenu(menuItems:Array):var menuItem:Object = "添加台账"; //菜单项名称

menuItem.itemIcon = this.menu_TZ_add;//菜单项图标

menuItems.push(menuItem);

}

//菜单项点击事件

function tree_MenuItemSelected(event:MenuEvent):var menuItem:Object = event.menu.selectedItem as Object;

……

switch(menuItem.label)

{

case ":

……

break;

……

}

效果：

Flex4自定义右键菜单