Custom “context menu” in flex

Question

I would like to add a custom context menu with line separators, but can't really figure out how. What I need:

<mx:List id="treeContextFile" visible="false" width="233" verticalScrollPolicy="off" includeInLayout="false">
        <mx:dataProvider>
            <mx:Array >
                <mx:String>Open</mx:String>
                <horizontal line here >
                <mx:String>Cut</mx:String>
                <mx:String>Copy</mx:String>
                <mx:String>Paste</mx:String>
                <horizontal line here >
                <mx:String>Rename</mx:String>
                <mx:String>Delete</mx:String>
                <horizontal line here >
                <mx:String>Properties</mx:String>
            </mx:Array>
        </mx:dataProvider>
    </mx:List>

Answer 1

Here's a blog with an example like what you are needing:

http://blog.flexexamples.com/2008/10/02/adding-a-horizontal-separator-to-a-flex-popupbutton-controls-pop-up-menu-redux/#more-816

Answer 2

If you're talking about a true contextual menu (the ones that shows up on right click), you might want to use the ContextMenu and ContextMenuItems class.

Something like that (in a <mx:Script> block) :

    var cmiOpen  :ContextMenuItem = new ContextMenuItem( "Open" );
    var cmiCut   :ContextMenuItem = new ContextMenuItem( "Cut", true );
    var cmiCopy  :ContextMenuItem = new ContextMenuItem( "Copy" );
    var cmiPaste :ContextMenuItem = new ContextMenuItem( "Paste" );
    var cmiRename:ContextMenuItem = new ContextMenuItem( "Rename", true );
    var cmiDelete:ContextMenuItem = new ContextMenuItem( "Delete" );
    var cmiProps :ContextMenuItem = new ContextMenuItem( "Properties" );

    var cm:ContextMenu = new ContextMenu();
        cm.addItem( cmiOpen );
        cm.addItem( cmiCut );
        cm.addItem( cmiCopy );
        cm.addItem( cmiPaste );
        cm.addItem( cmiRename );
        cm.addItem( cmiDelete );
        cm.addItem( cmiProps );

    cmiOpen.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, openFunction );
    cmiCut.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, cutFunction );
    ...

    yourComponent.contextMenu = cm;

Answer 3

i think this is the link which helps u regarding context menu. http://blog.flexexamples.com/2007/12/31/creating-a-custom-context-menu-on-a-richtexteditor-control-in-flex/