Flex: Menubar, menu click

Question

I do not know why but I see that itemclick event on a menubar do not fired unless you click a sub item.

What is the clean way to handle clicks on menuitems which are on the top level and do not have sub menu items.

For example I want to fire an event whenever MenuItem B is clicked.

<?xml version="1.0"?>
<!-- menus/MenuBarControl.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <mx:MenuBar id="myMenuBar" labelField="@label" itemClick="{itemClick(event)}" >
        <mx:XMLList>
            <menuitem label="MenuItem A">
                <menuitem label="SubMenuItem A-1"/>
                <menuitem label="SubMenuItem A-2"/>
            </menuitem>
            <menuitem label="MenuItem B"/>
        </mx:XMLList>
    </mx:MenuBar>
</mx:Application>

Answer 1

This behavior is by design. Think if it as the menu bar in your browser: clicking on top level items like File, Edit, View etc just shows the popup, they don't trigger any action.

From the livedocs page for MenuBar

A MenuBar control defines a horizontal, top-level menu bar that contains one or menu items. Clicking on a top-level menu item opens a pop-up submenu that is an instance of the Menu control.

The top-level menu bar of the MenuBar control is generally always visible. It is not intended for use as a pop-up menu. The individual submenus pop up as the user selects them with the mouse or keyboard.

If you must do something on top level item click, listen to the click event on the MenuBar and traverse through the parent chain of the event.target searching for a MenuBarItem, the default item renderer for top level items of a MenuBar

Answer 2

The menu bar which flex gives out of the box has lot of limitations .For instance i cannot have a nested submenu like top_menu -level 1 menu -level 2 menu -level 3 menu..... to counter this one need to add an extra menu in each sub-menu which is pain indeed.

Answer 3

Hi,

Guess this can help,

protected function myMenuBar_clickHandler(event:MouseEvent):void
        {
            // TODO Auto-generated method stub
            stackIndex=event.target.data.@index;
        }

protected function myMenuBar_itemClickHandler(event:MenuEvent):void
        {
            // TODO Auto-generated method stub
            stackIndex=event.item.@index;
        }

Fof the following menubar,

<mx:MenuBar id="myMenuBar" labelField="@label" click="myMenuBar_clickHandler(event)" itemClick="myMenuBar_itemClickHandler(event)" >   
    <mx:XMLList>   
        <menuitem label="MenuItem A" index="0">   
            <menuitem label="SubMenuItem A-1" index="0-0"/>   
            <menuitem label="SubMenuItem A-2" index="0-1"/>   
        </menuitem>   
        <menuitem label="MenuItem B" index="1"/>   
    </mx:XMLList>   
</mx:MenuBar>  

Here i ve also added a property 'index'. As an XML we can add any element in it except for some of the keywords.

The "ItemClick" event will take of the childrens, and the "Click" will take care of the toplevel menubar items(parents).

Hope this helps.

Regards, Prakash