Flex Tree & DataGrid 右键菜单

 项目中经常遇到右键菜单的问题，特别是对于Tree 或者 DataGrid 组建的右键菜单问题。

常见的问题譬如是：Tree 组件对于子节点删除、修改，在folder上显示增加的操作。

                              DataGrid组件选中一项，然后修改或者删除等操作。

1.对于Tree 组件，要对           Tree.contextMenu.addEventListener(ContextMenuEvent.MENU_SELECT,onContextMenuSelectedHandler);

然后在侦听函数中查看ContextMenuEvent的mouseTarget，看看是否TreeItemRenderer，并且TreeItemRenderer的data，就可以知道选中是那个节点，并且知道此节点是否在子节点还是根节点。

2.对于DataGrid组件，要知道右键单击是选中是那一行，要在mouseOver时候调用它的protected 方法：mouseEventToItemRenderer 知道是哪一个ItemRenderer。然后在它的contextMenu监听：

contextMenu.addEventListener(ContextMenuEvent.MENU_SELECT,contextMenu_menuSelectHandler);

在侦听方法中调用它的protected 方法：itemRendererToIndex 把ItemRenderer 转为index值。这个时候就可以让DataGrid选中这个Index，然后用selectedIndex值去处理当前选中的项了。

(注意：1.最多可以向 Flash Player 中的上下文菜单添加 15 个自定义项。AIR 中对上下文菜单中的项数没有明确限制。

2.必须在使用 ContextMenu() 构造函数创建 ContextMenu 对象后才能调用其方法。

        3.还有一点需要注意，就是ContextMenuItem 还有一些限制，具体参考ContextMenuItem API )

 

 

Tree 代码：

 

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="300" xmlns:render="render.*">
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.controls.listClasses.IListItemRenderer;
			import mx.events.FlexEvent;
			public var newBuildMenuItem:ContextMenuItem;//菜单项变量
			private var itemRendererUnderPoint:IListItemRenderer;
			protected function tree1_creationCompleteHandler(event:FlexEvent):void
			{
				createTreeMenuItem();  
				tree.contextMenu = getTreeContxtMenu();  
				tree.contextMenu.addEventListener(ContextMenuEvent.MENU_SELECT,onContextMenuSelectedHandler);
				
			}
			
			private function onContextMenuSelectedHandler(event:ContextMenuEvent):void
			{
				var tag:Object=event.mouseTarget;
				if(tag && tag.parent && tag.parent.hasOwnProperty("data") && tag.parent.data && (tag.parent.data is XML))
				{
					if((tag.parent.data as XML).children() && (tag.parent.data as XML).children().length() > 0)
					{
						newBuildMenuItem.visible = true;
					}
					else
					{
						newBuildMenuItem.visible = false;
					}
				}
			}
			
			public function createTreeMenuItem(): void//菜单项创建函数，并添加菜单监听器
			{   
				newBuildMenuItem = new ContextMenuItem("Add New Folder"); 
				newBuildMenuItem.visible = false;
				newBuildMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, newBuildHandler2);   
			}   
			
			private function getTreeContxtMenu(): ContextMenu//将菜单项目添加到菜单中
			{   
				var contextMenu: ContextMenu = new ContextMenu();   
				contextMenu.hideBuiltInItems();   
				contextMenu.customItems.push(newBuildMenuItem);   
				return contextMenu;   
			}  
			
			public function newBuildHandler2(event:Event):void//点击菜单执行函数
			{
				Alert.show("Add New Folder","Notice");
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:XMLList id="treeData">
			<node label="Mail Box">
				<node label="Inbox">
					<node label="Marketing"/>
					<node label="Product Management"/>
					<node label="Personal"/>
				</node>
				<node label="Outbox">
					<node label="Professional"/>
					<node label="Personal"/>
				</node>
				<node label="Spam"/>
				<node label="Sent"/>
			</node>
		</fx:XMLList>
		
	</fx:Declarations>
	<render:ContextAdvancedDataGrid width="100%" height="100%"/>//需要ContextAdvancedDataGrid.as 文件哦！
	<mx:Tree id="tree" width="50%" height="100%" labelField="@label"
			 showRoot="false" dataProvider="{treeData}"
			 initialize="tree1_creationCompleteHandler(event)"
			 />
</s:VGroup>

 

ContextAdvancedDataGrid.as 文件（DataGrid 组件）

 

<?xml version="1.0" encoding="utf-8"?>
<mx:AdvancedDataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
					 xmlns:s="library://ns.adobe.com/flex/spark" 
					 xmlns:mx="library://ns.adobe.com/flex/mx" initialize="initializeHandler();">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.listClasses.IListItemRenderer;
			
			[Bindable]
			private var dataCollection:ArrayCollection;
			
			private var itemRendererUnderPoint:IListItemRenderer;
			private var newBuildMenuItem:ContextMenuItem;//菜单项变量
			override protected function mouseOverHandler(event:MouseEvent):void
			{
				itemRendererUnderPoint = super.mouseEventToItemRenderer(event);
				// Don't show rollOver effect for Header Items
				if (super.isHeaderItemRenderer(itemRendererUnderPoint))
					return;
				super.mouseOverHandler(event);
			}
			
			private function initializeHandler():void
			{
				var dataArray:Array = 
					[
						{label: "C", displayCode: 1}, 
						{label: "G", displayCode: 2}, 
						{label: "E", displayCode: 1}, 
						{label: "Q", displayCode: 2}, 
						{label: "T", displayCode: 1}, 
					];
				
				dataCollection = new ArrayCollection(dataArray);
				
				createContextMenu();
			}
			
			private function createContextMenu():void
			{
				contextMenu = new ContextMenu();
				contextMenu.hideBuiltInItems();
				contextMenu.addEventListener(ContextMenuEvent.MENU_SELECT,contextMenu_menuSelectHandler);
			}
			
			private function contextMenu_menuSelectHandler(event:ContextMenuEvent):void
			{
				if (itemRendererUnderPoint != null)
				{
					var rightClickIndex:int = super.itemRendererToIndex(itemRendererUnderPoint);
					newBuildMenuItem = new ContextMenuItem("新建");
					contextMenu.customItems.push(newBuildMenuItem);  
					if (selectedIndex != rightClickIndex)
						selectedIndex = rightClickIndex;
				}
				else
				{
					contextMenu.customItems = new Array();
				}
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<mx:dataProvider>
		<mx:HierarchicalData source="{dataCollection}" />
	</mx:dataProvider>
</mx:AdvancedDataGrid>