We need to add an ability to right-click a list item and manipulate context menu on the fly for each list item.
We create our context menu along with our custom items. Set up our event listener to listen for when a context menu is displayed and look up a list item on which right-click occurred. We enable/disable/change context menu items accordingly depending if right-click occurred over a list item or not.
FIrst we need to create our GUI (note: warnings will occur since Object's "label" property is not bindable...this is done to make this example as easy as possible):
<mx:List id="_list">
<mx:dataProvider>
<mx:Array>
<mx:Object label="Apples"/>
<mx:Object label="Oranges"/>
<mx:Object label="Peaches"/>
<mx:Object label="Plums"/>
</mx:Array>
</mx:dataProvider>
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data.label}"/>
</mx:Component>
</mx:itemRenderer>
</mx:List>
Next we need to set up our context menu with items and make it our List's menu:
private var cm:ContextMenu;
private var cmi:ContextMenuItem;
private function init():void
{
cmi = new ContextMenuItem("Some Context Item");
cmi.enabled = false;
cm = new ContextMenu();
cm.hideBuiltInItems();
cm.customItems = [cmi];
cm.addEventListener(ContextMenuEvent.MENU_SELECT, onMnuSelect);
_list.contextMenu = cm;
}
Lastly, we need to create a listener function for our context menu. Here we try to locate our Label object and adjust our context menu item(s) accordingly:
private function onMnuSelect(event:ContextMenuEvent):void
{
var obj:InteractiveObject = event.mouseTarget;
var item:Object;
while (obj.parent) {
if (obj is Label) {
item = (obj as Label).data;
_list.selectedItem = item;
cmi.caption = "Context Item: " + item.label;
cmi.enabled = true;
return;
}
obj = obj.parent;
}
cmi.caption = "Some Context Item";
cmi.enabled = false;
}
Here's a complete app code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Label;
private var cm:ContextMenu;
private var cmi:ContextMenuItem;
private function init():void
{
cmi = new ContextMenuItem("Some Context Item");
cmi.enabled = false;
cm = new ContextMenu();
cm.hideBuiltInItems();
cm.customItems = [cmi];
cm.addEventListener(ContextMenuEvent.MENU_SELECT,
onMnuSelect);
_list.contextMenu = cm;
}
private function
onMnuSelect(event:ContextMenuEvent):void
{
var obj:InteractiveObject = event.mouseTarget;
var item:Object;
while (obj.parent) {
if (obj is Label) {
item = (obj as Label).data;
_list.selectedItem = item;
cmi.caption = "Context Item: " +
item.label;
cmi.enabled = true;
return;
}
obj = obj.parent;
}
cmi.caption = "Some Context Item";
cmi.enabled = false;
}
]]>
</mx:Script>
<mx:List id="_list">
<mx:dataProvider>
<mx:Array>
<mx:Object label="Apples"/>
<mx:Object label="Oranges"/>
<mx:Object label="Peaches"/>
<mx:Object label="Plums"/>
</mx:Array>
</mx:dataProvider>
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data.label}"/>
</mx:Component>
</mx:itemRenderer>
</mx:List>
</mx:Application>
+