Specifying a custom icon function on a ComboBox control in Flex

The following example shows how you can specify a custom icon function on a Flex ComboBox control by setting the iconFunction property on the ComboBox control’s dropdown menu.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/13/specifying-a-custom-icon-function-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

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

            [Embed("assets/status_online.png")]
            private var statusOnline:Class;

            private function comboBox_open(evt:DropdownEvent):void {
                comboBox.dropdown.iconFunction = comboBoxDropdown_func;
            }

            private function comboBoxDropdown_func(item:Object):Class {
                if (item.hasOwnProperty("online") && item.online) {
                    return statusOnline;
                }
                return null;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" online="true" />
        <mx:Object label="Two" />
        <mx:Object label="Three" online="true" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" online="true" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            open="comboBox_open(event);" />

</mx:Application>

View source is enabled in the following example.

5 thoughts on “Specifying a custom icon function on a ComboBox control in Flex

  1. Since a few days the examples are just shown as code, not as a working example. I see this as a step back. While the loading time of the page increased of course, it takes longer to see what’s going on, and to see that, every reader has to build it. IMO this reduces the impact of this blog, because seeing is believing.

    Thanks anyway for your great work here!

    Klaus

  2. it’s rigth, i’m french and every days,
    i see the blog because it show greats flex codes exemples.

    The demonstrations are very important !!!

  3. Yeah, I agree with Klaus too, they *should* have examples. If I get time over the next few days I’ll go back and upload SWF examples. But even without SWFs, it is pretty easy to copy/paste into Flex Builder and see how the code works (this example is marginally trickier since you have to find a PNG — or you can grab the PNG file from http://www.famfamfam.com/lab/icons/silk/).

    Peter

  4. Hi Peter, thanks for the feedback! It’s ok if they are missing from time to time – you certainly have also other tasks on your plate. Just wanted to make sure that this didn’t happen by intention… and to express that it really provides value.

    Cheers

    Klaus

Comments are closed.