Flex 中的DataGrid添加右键菜单

最新推荐文章于 2017-06-14 22:32:41 发布

longyi_java

最新推荐文章于 2017-06-14 22:32:41 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

文章标签： Flex XML Adobe

本文链接：https://blog.youkuaiyun.com/longyi_java/article/details/83875117

本文介绍了一个使用Flex创建DataGrid上下文菜单的示例。通过代码实现了自定义菜单项并为这些菜单项添加了事件监听器，当用户在DataGrid中选择不同项时，可以显示相应的属性信息。

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
				verticalAlign="middle"
				backgroundColor="white"
				creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			
			import mx.controls.Alert;
			
			
			[Bindable]
			private var cm:ContextMenu;
			
			private var alert:Alert;
			
			private function init():void {
				var cmi:ContextMenuItem = new ContextMenuItem("菜单项", true);
				cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect);
				
				var cmi1:ContextMenuItem = new ContextMenuItem("菜单项1", false);
				cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect1);
				
				cm = new ContextMenu();
				
				cm.hideBuiltInItems();
				//添加菜单项
				cm.customItems = [cmi,cmi1];
				cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);



			}
			
			private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
				dataGrid.selectedIndex = lastRollOverIndex;
			}



			
			
			
			private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void {
				var obj:Object = dataGrid.selectedItem;



				alert = Alert.show("Property A: " + obj.@propertyA + "\n" + "Property B: " + obj.@propertyB,""+ obj.@label, Alert.OK);
			}
			private function contextMenuItem_menuItemSelect1(evt:ContextMenuEvent):void {
				var obj:Object = dataGrid.selectedItem;



				alert = Alert.show("Property A: " + obj.@propertyA + "\n" + "Property B: " + obj.@propertyB, ""+ obj.@label, Alert.OK);
			}
			
			
		]]>
	</mx:Script>
	
	<mx:XML id="itemsXML">
		<items>
			<item label="Item 1" data="i001" propertyA="Item 1.A" propertyB="Item 1.B" />
			<item label="Item 2" data="i002" propertyA="Item 2.A" propertyB="Item 2.B" />
			<item label="Item 3" data="i003" propertyA="Item 3.A" propertyB="Item 3.B" />
	 
			<item label="Item 4" data="i004" propertyA="Item 4.A" propertyB="Item 4.B" />
			<item label="Item 5" data="i005" propertyA="Item 5.A" propertyB="Item 5.B" />
			<item label="Item 6" data="i006" propertyA="Item 6.A" propertyB="Item 6.B" />
			<item label="Item 7" data="i007" propertyA="Item 7.A" propertyB="Item 7.B" />
			<item label="Item 8" data="i008" propertyA="Item 8.A" propertyB="Item 8.B" />
	 
		</items>
	</mx:XML>
	
	<mx:Number id="lastRollOverIndex" />
	
	<mx:DataGrid id="dataGrid"
				 width="400"
				 dataProvider="{itemsXML.item}"
				 contextMenu="{cm}"



				 itemRollOver="lastRollOverIndex = event.rowIndex"


>
		<mx:columns>
			<mx:DataGridColumn id="labelCol"
							   dataField="@label"
							   headerText="Label:" />
			
			<mx:DataGridColumn id="propACol"
							   dataField="@propertyA"
							   headerText="Property A:" />
			
			<mx:DataGridColumn id="propBCol"
							   dataField="@propertyB"
							   headerText="Property B:" />
		</mx:columns>
	</mx:DataGrid>
	
	<mx:Label text="{dataGrid.selectedItem.@label}" />
	
</mx:Application>

1、第一步：在DataGrid中设置右键的浮动菜单：

 contextMenu="{cm}"

2、itemRollOver事件设置选择的行下标

itemRollOver="lastRollOverIndex = event.rowIndex"

3、在init()中设置DataGrid的选择事件，把行下标设置给datagrid的selectIndex

//菜单添加选择事件

cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);

//选择事件把行下标设置给datagrid的selectIndex

private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
				dataGrid.selectedIndex = lastRollOverIndex;
			}

4、在其它的菜单事件中获取DataGrid的选择行的记录

var obj:Object = dataGrid.selectedItem;