Flex 2.0.1 ComboBox with icon support.

April 28, 2007

Sometimes a ComboBox with icons in the list as well as in the text display area can be useful. However the out of the box Flex ComboBox component dosn’t support this. Here is one way of doing it.

IconComboBox2

Basically I’ve extended the existing ComboBox adding iconField and iconFunction properties. I had to instance my own ClassFactory for the internal list that is used as the dropdown so that I could pre-initialize the required properties. I override the measuredWidth so that I can make room for the icon, and adjust the x position of the internal textInput to compensate.

A little addition to the toolbox that can come in really handy.

Sample and Source : IconComboBox

Enjoy.

Jason Hawryluk

Possibly related posts: (automatically generated)

Posted by flexibleexperiments
Filed in Adobe, Components, Flex, Tips

13 Responses to “Flex 2.0.1 ComboBox with icon support.”

  1. flexpaul Says:
    April 29, 2007 at 5:22 pm

    When I click view source and it goes to delicious. what’s happening?

  2. flexibleexperiments Says:
    April 29, 2007 at 6:50 pm

    Seems to be working fine here? Weird.
    Anyone else having trouble ?

    jason

  3. eightlines Says:
    May 7, 2007 at 3:23 pm

    View Source appears to be working fine here. Thanks for the code!

  4. Code Sweat Blog » Blog Archive » Some Flex 2 Related Links (pt. two) Says:
    July 5, 2007 at 2:27 pm

    [...] Flex 2.0.1 ComboBox with icon support. « Flexible Experiments [...]

  5. Ben Holloway Says:
    August 4, 2007 at 5:08 pm

    Source link seems to be not working

  6. flexibleexperiments Says:
    August 4, 2007 at 5:19 pm

    Seems to be working for me.

    Ben, try again, and let me know.

    Jason

  7. Jeoren Says:
    October 19, 2007 at 9:00 am

    Do you have embed the icons? I need to load them dynamically. But it keeps throwing an error in measuredWidth (null object reference)

    …
    var l:String = element.@nld+” - “+element.@nom;
    var ic:String = “images/flags/”+String(element.@nld).toLowerCase()+”.png”; trace(ic);
    countryArr[cntr] = {label:l, data:ic};
    …

    …

  8. Tim Wilson Says:
    November 7, 2007 at 6:11 am

    Thanks, very useful :-)

  9. Ezmo Developer Blog » Sexy Combo Boxes Says:
    November 9, 2007 at 7:25 am

    [...] was off to Google to see if anyone had done this previously. We found this great post on the blog Flexible Experiments explaining how you can create a combo box which supports icons. Of course our designers [...]

  10. Phone Says:
    November 28, 2007 at 6:33 pm

    Viewing source code seems to work OK.

  11. Denis Morentsov Says:
    January 25, 2008 at 2:11 am

    Jason, this is a terrific piece of code. Do you know if it would be simple to extend the icon to contain an object drawn in Flex as opposed to an image?

  12. Elton Bicalho do Carmo Says:
    February 26, 2008 at 6:20 pm

    Hey Jason,

    great job! It will be very useful at my project (Teeth chart).

    Excellent!

  13. glinto Says:
    April 29, 2008 at 1:35 pm

    Jason,

    Thanks for the code. Not specifying icon however throws an error at creation. Your measureWidth shoulb changed to sg like that:

    override public function set measuredWidth(value:Number):void
    {
    if (displayIconObject == null)
    super.measuredWidth = value + getStyle(”cornerRadius”);
    else
    super.measuredWidth = value + (DisplayObject(displayIconObject).width+getStyle(”cornerRadius”));
    }

Leave a Reply