How to add a custom context menu to a Spark TextArea in Flex 4
May.22, 2010 in
Flash/ActionScript/Flex
There is a current known issue with adding custom context menus on a RichEditableText Spark component:
http://bugs.adobe.com/jira/browse/SDK-23926
This includes the TextArea component. Essentially, any custom context menus will not show up. There is a work around mentioned in the comments for the bug on Adobe’s website but I thought I would re-hash and show an example since this had me a bit stumped.
The work around is to attach the context menu to the TextArea’s TextDisplay object via the “textDisplay()” accessor method. I have created a simple example with source.
<?xml version="1.0" encoding="utf-8"?> <s: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" minWidth="400" minHeight="200" backgroundColor="#9FA0D4" width="500" height="300" creationComplete="init();" viewSourceURL="srcview/index.html"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ private function init():void{ var cm:ContextMenu = new ContextMenu(); var red:ContextMenuItem = new ContextMenuItem('Red',false,true,true); red.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleRed); var green:ContextMenuItem = new ContextMenuItem('Green',false,true,true); green.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleGreen); var blue:ContextMenuItem = new ContextMenuItem('Blue',false,true,true); blue.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handleBlue); cm.customItems.push(red); cm.customItems.push(green); cm.customItems.push(blue); cm.clipboardMenu = true; textArea.textDisplay.contextMenu = cm; } private function handleRed(e:Event):void{ textArea.setStyle('contentBackgroundColor', 'red'); } private function handleGreen(e:Event):void{ textArea.setStyle('contentBackgroundColor', 'green'); } private function handleBlue(e:Event):void{ textArea.setStyle('contentBackgroundColor', 'blue'); } ]]> </fx:Script> <s:TextArea id="textArea" x="161" y="74" text="This is a Flex 4 Spark TextArea. Right click to see the custom context menu. "/> </s:Application>


Leave a Reply