项目中经常遇到右键菜单的问题,特别是对于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>
转载原文: http://luhantu.iteye.com/blog/1530145