Flex Examples

In a previous example, “Adding a horizontal separator to a Flex PopUpButton control’s pop up menu”, we saw how you can add horizontal separators to a PopUpButton control’s pop up menu by setting the type attribute to “separator”. So, “what other special types are there?”, you may be asking, as it turns out you can create folders with sub-menus, checkboxes, radiobuttons, and even disable item selection.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/29/adding-checkboxes-radiobuttons-and-sub-menus-to-a-flex-popupbutton-controls-pop-up-menu/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
            fontWeight: normal;
            textAlign: left;
        }
    </mx:Style>

    <mx:XML id="xmlDP">
        <root>
            <node label="The quick brown fox jumped over the lazy dog." />
            <node label="Lorem ipsum (disabled)." enabled="false" />
            <node type="separator" />
            <node label="parent">
                <node label="child1" />
            </node>
            <node label="parent (disabled)" enabled="false">
                <node label="child1" />
                <node label="child2" />
                <node label="child3" />
            </node>
            <node type="separator" />
            <node label="type=check" id="ch" type="check" toggled="true" />
            <node label="type=check" id="ch" type="check" toggled="true" enabled="false" />
            <node type="separator" />
            <node label="1) type=radio" type="radio" groupName="radioGroup" toggled="true"  />
            <node label="2) type=radio" type="radio" groupName="radioGroup" />
            <node label="3) type=radio" type="radio" groupName="radioGroup" />
            <node label="4) type=radio" type="radio" groupName="radioGroup" enabled="false" />
        </root>
    </mx:XML>

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            private var menu:Menu;

            private function init():void {
                menu = new Menu();
                menu.labelField = "@label";
                menu.dataProvider = xmlDP;
                menu.showRoot = false;
                menu.width = popUpButton.width;
                popUpButton.popUp = menu;
            }
        ]]>
    </mx:Script>

    <mx:PopUpButton id="popUpButton"
            label="Please select an item"
            openAlways="true"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.