Displaying icons in a Flex PopUpButton control

The following example shows you how you can add items to a pop up menu in a PopUpButton control in Flex by specifying the iconField property in the PopUpButton control’s nested Menu control.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2008/01/24/displaying-icons-in-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="top"
        backgroundColor="white">

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

            [Bindable]
            private var menu:Menu;

            private function initMenu():void {
                menu = new Menu();
                menu.dataProvider = arr;
            }
        ]]>
    </mx:Script>

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

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

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button"
                icon="@Embed('assets/Button.png')" />
        <mx:Object label="ButtonBar"
                icon="@Embed('assets/ButtonBar.png')" />
        <mx:Object label="CheckBox"
                icon="@Embed('assets/CheckBox.png')" />
        <mx:Object label="ColorPicker"
                icon="@Embed('assets/ColorPicker.png')" />
    </mx:Array>

    <mx:PopUpButton id="popUpButton"
            label="Select a control..."
            popUp="{menu}"
            preinitialize="initMenu();"
            creationComplete="popUpButton.open();" />

</mx:Application>

View source is enabled in the following example.

If your data provider didn’t have an “icon” field, you could set the iconField property on the Menu instance to the field with the icon you want to display, as shown in the following snippet:

View MXML

<mx:Array id="arr">
    <mx:Object label="Alert" />
    <mx:Object label="Button"
            img="@Embed('assets/Button.png')" />
    <mx:Object label="ButtonBar"
            img="@Embed('assets/ButtonBar.png')" />
    <mx:Object label="CheckBox"
            img="@Embed('assets/CheckBox.png')" />
    <mx:Object label="ColorPicker"
            img="@Embed('assets/ColorPicker.png')" />
</mx:Array>

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

        [Bindable]
        private var menu:Menu;

        private function initMenu():void {
            menu = new Menu();
            menu.iconField = "img";
            menu.dataProvider = arr;
        }
    ]]>
</mx:Script>

View source