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.

7 thoughts on “Displaying icons in a Flex ComboBox control

  1. Any luck having that icon display once an item is selected? Internally it’s a text field but I’m looking for a way to change that.

  2. Hi,

    I’m trying to do the same except with a Menu. A Menu where the MenuItems have embedded icons, aligned on the left. Something which should be so easy seems like a lot of trouble.

    Matt

  3. Method 1:
    Took me a while to figure out since i had my comboBox inside another component and not in main.mxml. You need to declare the IMAGES only in the main.mxml in other words where ever the tag is, otherwise the icon wont show up in the combo box.

    Method 2:
    This is better coz u can see the icon after a selection is made unlike method1 which shows icons only when dropdown is mainfested.
    http://flexibleexperiments.wordpress.com/2007/04/28/flex-201-combobox-with-icon-support/

  4. Hello there and thanks in advance…
    I am trying to make a combobox with a divider. List of values normally but on top one value ‘ADD NEW…’ and a divider. Any ideas?
    Thanks

    Have fun

  5. Hi, I’m trying to change the combobox arrow icon (that is, the outer icon). But couldn’t find a resource yet… does anyone have some tips or know resources about that ?

  6. Also, you have to make your image variable public only. I tried to make it private and it was not working. Quite weired, the “private” should work

Comments are closed.