menu bar control in flex ,needed to handle separate method for individual menu item.

Question

Hi, i need to fire separate method for individual menu item clicked ,so that individual item can handle separate method.

and i need know what all the properties are available in menu item like type="radio".

<mx:MenuBar id="jj" labelField="@label" itemClick="MenuItemClick(event)" x="23" y="228">
    <mx:XMLList>
        <menuitem label="File">
            <menuitem label="New" type="radio"/>
            <menuitem label="Open" data="Openfile" type="Check" />
            <menuitem label="Save" />
            <menuitem label="Exist"/>
        </menuitem>           
    </mx:XMLList>   
</mx:MenuBar>

Can you give any link or example for menubar control?

Thanks

Answer 1

Example from Adobe Flex docs MenuBar

Only three types allowed: check, radio, or separator.

<?xml version="1.0"?>
<!-- Simple example to demonstrate the MenuBar control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initCollections();" >

    <mx:Script>
        <![CDATA[

            import mx.events.MenuEvent;
            import mx.controls.Alert;
            import mx.collections.*;

            [Bindable]
            public var menuBarCollection:XMLListCollection;

            private var menubarXML:XMLList =
                <>
                    <menuitem label="Menu1" data="top">
                        <menuitem label="MenuItem 1-A" data="1A"/>
                        <menuitem label="MenuItem 1-B" data="1B"/>
                    </menuitem>
                    <menuitem label="Menu2" data="top">
                        <menuitem label="MenuItem 2-A" type="check"  data="2A"/>
                        <menuitem type="separator"/>
                        <menuitem label="MenuItem 2-B" >
                            <menuitem label="SubMenuItem 3-A" type="radio"
                                groupName="one" data="3A"/>
                            <menuitem label="SubMenuItem 3-B" type="radio"
                                groupName="one" data="3B"/>
                        </menuitem>
                    </menuitem>
                </>;

            // Event handler to initialize the MenuBar control.
            private function initCollections():void {
                menuBarCollection = new XMLListCollection(menubarXML);
            }

            // Event handler for the MenuBar control's itemClick event.
            private function menuHandler(event:MenuEvent):void  {
                // Don't open the Alert for a menu bar item that 
                // opens a popup submenu.
                if (event.item.@data != "top") {
                    Alert.show("Label: " + event.item.@label + "\n" + 
                        "Data: " + event.item.@data, "Clicked menu item");
                }        
            }
         ]]>
    </mx:Script>

    <mx:Panel title="MenuBar Control Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10">

        <mx:Label width="100%" color="blue"
           text="Select a menu item."/>

        <mx:MenuBar labelField="@label" itemClick="menuHandler(event);" 
            dataProvider="{menuBarCollection}" />

    </mx:Panel>
</mx:Application>

Also bookmark this page Language Reference.

Answer 2

Vineth,

You are unable to add individual event handlers for menu items unless you dynamically create the menu bar and the sub items. This is more pain than it's worth, so I would recommend using the itemCLick handler as stated above and use a switch to determine what methods to fire. For example:

switch( event.item.@data ){

  case "3A":
    doSomething();
    break;
  case "3A":
    doSomethingElse();
    break;
  defualt:
    doDefault();
    break;

}

Note: this is building off of zdmytriv answer