Displaying icons in a Flex ComboBox control

I did a post the other day on “Displaying icons in a Flex List control”, and figured since the ComboBox control uses the List control internally for the dropdown menu, making the ComboBox control display icons also should be pretty trivial. Well, after about 2 minutes of analyzing the documentation, it turns out it is pretty simple. The trick was to set the iconField property on the ComboBox instance’s dropdown property, which is a reference to the combo box’s internal List control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/18/displaying-icons-in-a-flex-combobox-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            [Bindable]
            [Embed(source="assets/bulletCheck.png")]
            public var BulletCheck:Class;

            [Bindable]
            [Embed(source="assets/bulletWarning.png")]
            public var BulletWarning:Class;

            [Bindable]
            [Embed(source="assets/bulletCritical.png")]
            public var BulletCritical:Class;

            private function init():void {
                comboBox.dropdown.iconField = "icon";
            }
        ]]>
    </mx:Script>

    <mx:ComboBox id="comboBox"
            rowCount="4"
            width="200"
            themeColor="haloSilver"
            textIndent="5"
            selectedIndex="-1"
            prompt="Please select an item..."
            creationComplete="init()">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="Item 1" icon="BulletWarning" />
                <mx:Object label="Item 2" icon="BulletCritical" />
                <mx:Object label="Item 3" icon="BulletCritical" />
                <mx:Object label="Item 4" icon="BulletCheck" />
                <mx:Object label="Item 5" icon="BulletWarning" />
                <mx:Object label="Item 6" icon="BulletCheck" />
                <mx:Object label="Item 7" icon="BulletCheck" />
                <mx:Object label="Item 8" icon="BulletCritical" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

Tagged as: dropdown, icon, iconField