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

By Peter deHaan On January 29, 2008 · Leave a Comment

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.

Tagged with: type

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

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

Paul Bohnenkamp says:

February 18, 2008 at 11:51 am

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

Reply
pflex says:

August 5, 2008 at 3:18 am

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…

Reply
Bob W says:

October 28, 2008 at 9:38 am

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

Reply