Adding checkboxes, radiobuttons, and sub-menus to a Flex PopUpButton control’s pop up menu

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.

<?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.

0 thoughts on “Adding checkboxes, radiobuttons, and sub-menus to a Flex PopUpButton control’s pop up menu

  1. Hi,

    Is there a way to add an icon to a menuitem? For instance an icon for parent > child1 in your example above?

    Thanks,
    Paul

  2. hi,

    i search a soluce for click in your item menu (check), but no close this menu.
    close menu when i click button or press Escape.

    thank…

  3. Great examples, love the site, have used many of them in our code base. For the life of me I can’t figure out how do you make a popupButton menu go up instead of down? I know if it’s at the bottom of an application or browser screen the menu goes up, but I can’t figure out how to do it programatically or find any examples. Any advise would be great. Thanks