Setting a variable row height on an MX MenuBar control in Flex

The following example shows how you can set a variable row height on an MX MenuBar control in Flex by listening for the menuShow event, setting the Boolean variableRowHeight property on the MenuEvent object’s menu property, and then calling the invalidateSize() method.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/19/setting-a-variable-row-height-on-an-mx-menubar-control-in-flex/ -->
<mx:Application name="MenuBar_menuShow_menu_variableRowHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
 
            protected function mBar_menuShowHandler(evt:MenuEvent):void {
                evt.menu.variableRowHeight = ch.selected;
                evt.menu.invalidateSize();
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="ch" label="variableRowHeight" />
    </mx:ApplicationControlBar>
 
    <mx:MenuBar id="mBar"
            labelField="@label"
            menuShow="mBar_menuShowHandler(event);">
        <mx:dataProvider>
            <mx:XMLListCollection>
                <mx:XMLList xmlns="">
                    <menu label="File...">
                        <item label="New" />
                        <item label="Open" />
                        <item label="Save" />
                        <item label="Save As" />
                        <fake type="separator" />
                        <item label="Exit" />
                    </menu>
                    <menu label="Edit...">
                        <item label="Cut" />
                        <item label="Copy" />
                        <item label="Paste" />
                        <fake type="separator" />
                        <item label="Undo" />
                        <item label="Redo" />
                        <fake type="separator" />
                        <item label="radio button" type="radio" toggled="true" />
                        <item label="check box" type="check" toggled="true" />
                    </menu>
                </mx:XMLList>
            </mx:XMLListCollection>
        </mx:dataProvider>
    </mx:MenuBar>
 
</mx:Application>

If you’re using Flex 4.0+, you can use the following code:

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/19/setting-a-variable-row-height-on-an-mx-menubar-control-in-flex/ -->
<s:Application name="MenuBar_menuShow_menu_variableRowHeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:CheckBox id="ch" label="variableRowHeight" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
 
            protected function mBar_menuShowHandler(evt:MenuEvent):void {
                evt.menu.variableRowHeight = ch.selected;
                evt.menu.invalidateSize();
            }
        ]]>
    </fx:Script>
 
    <mx:MenuBar id="mBar"
            labelField="@label"
            horizontalCenter="0" top="20"
            menuShow="mBar_menuShowHandler(event);">
        <mx:dataProvider>
            <s:XMLListCollection>
                <fx:XMLList xmlns="">
                    <menu label="File...">
                        <item label="New" />
                        <item label="Open" />
                        <item label="Save" />
                        <item label="Save As" />
                        <fake type="separator" />
                        <item label="Exit" />
                    </menu>
                    <menu label="Edit...">
                        <item label="Cut" />
                        <item label="Copy" />
                        <item label="Paste" />
                        <fake type="separator" />
                        <item label="Undo" />
                        <item label="Redo" />
                        <fake type="separator" />
                        <item label="radio button" type="radio" toggled="true" />
                        <item label="check box" type="check" toggled="true" />
                    </menu>
                </fx:XMLList>
            </s:XMLListCollection>
        </mx:dataProvider>
    </mx:MenuBar>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

5 thoughts on “Setting a variable row height on an MX MenuBar control in Flex

  1. this is xample ONLY works when data for menubar is embeded within MXML,

    if data is set after menubar is created and creation complete is fired, menuitems array is empty, thats because menuitems array is built from commitProperties and commitProperties is not getting called untill data is actually set on menuBar which in turn trigers update but anyways before accessing
    menuBarItems ,

    mBar.invalidateProperties();
    mBar.validateProperties();

    have to be called. otherwise menuBarItems will be empty,

    so my question is, is this a bug or a Feature?

Comments are closed.