Creating a simple label function on a Flex ComboBox control

The following example shows how you can format the label in a ComboBox using a custom label function.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/25/creating-a-simple-label-function-on-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.utils.StringUtil;

            private function comboBox_labelFunc(item:Object):String {
                return StringUtil.substitute("{0} ({1})", item.@name, item.@abbrev);
            }
        ]]>
    </mx:Script>

    <mx:XMLList id="statesXMLList">
        <state abbrev="AL" name="Alabama" />
        <state abbrev="AK" name="Alaska" />
        <state abbrev="AZ" name="Arizona" />
        <state abbrev="AR" name="Arkansas" />
        <state abbrev="CA" name="California" />
        <state abbrev="CO" name="Colorado" />
        <state abbrev="CT" name="Connecticut" />
    </mx:XMLList>

    <mx:ComboBox id="comboBox"
            prompt="Please select a State..."
            dataProvider="{statesXMLList}"
            labelFunction="comboBox_labelFunc" />

</mx:Application>

View source is enabled in the following example.

17 thoughts on “Creating a simple label function on a Flex ComboBox control

  1. well,I am a new learner in flex programming.yesterday,I found this website,and then I fell in interesting here.There are so many flexexamples that I read them almost in my work time. Thanks to your examples ,I acquire much knowledge.
    But I do not well in flex coding.I donot know sytax of flex wery well.How do I do now?Are there some skills in learning flex?I really love flex programming!
    Please tell me some ways to learn flex.Thank you!

  2. coco,

    If you want to learn Flex, I highly recommend picking up a book or two and starting there. There is an excellent list of Flex/ActionScript books listed over on Flex.org at http://flex.org/books/.

    Also, there is an excellent list of resources (such as user groups, forums, mailing lists) over at http://flex.org/community/.

    Finally, you can find a lot of excellent articles over at the Adobe Flex Developer Center. Plus you can find a lot of other articles that people blog about by checking out MXNA, at http://weblogs.macromedia.com/mxna/.

    (And of course, you can always subscribe to this blog’s RSS feed at http://feeds.feedburner.com/FlexExamples.)

    Happy Flexing!

    Peter

  3. peter,
    Thanks for your warm answer!

    I am a chinese and now living in GuangZhou.So I think I can not buy the books from http://flex.org/books/.My english is not very well!When I read the article,I can not understand it entirely.

    I have just graduated from college,.Two week ago,I got a job from this company,and the company arranged flex project to me.At that time,I heard the word “flex” for the first time!In my company,I do the job of flex alone!I cannot ask anybody when I had a question.It makes me learn hard.

    Now the process goes very slow,I have a lot of things about flex to learn!How can I happy Flexing!

    coco

  4. coco,

    I did a quick search, but didn’t see any Flex books in Chinese. You could try contacting Adobe Press (www.adobepress.com) and see if they have their Adobe Flex Classroom in a Book translated into Chinese, or if they plan to in the future.

    But I did find this Chinese Flex XML News Aggregator: http://www.rxna.cn/.

    There also seems to be a Chinese FlexCoders list at http://www.flexcoders.cn/.

    Hope that helps,

    Peter

  5. peter,
    Yes,it’s great help!I will learn more and more flexcoding from your blog and anywhere!

    I like flexing!Thank you for your help!

    coco

  6. Hi peter,

    Just to let you know, you have alot of ‘loyal’ readers everywhere around the globe.
    I’m from Kuala Lumpur, Malaysia.

    happy flex-ing!

  7. Hi, fantastic site! I’m new at Flex and I’m having trouble with the above. Works great, except I can’t figure out how to something with what appears in the combobox? While the label appears to be formatted, showing the correct XML rows, the actually stored data variable still shows [object:Object]. Any help on where I can figure this out? Thanks.

  8. Hi Peter,

    I was wondering if you could help me out please.
    In the example you give, how could we display in the dropdown list name (ABBREV), but when the option’s selected from it, just display the name.

    I mistakenly thought i could achieve this, by setting the labelfunction to display the first part, and the second would be handled by the labelField, but it appears labelFunction overwrites labelField.

    So i was wondering if this is possible at all.

    Thanks in advance,
    Regards

  9. Yon,

    Does this work for you?

    <mx:ComboBox id="comboBox"
            prompt="Please select a State..."
            dataProvider="{statesXMLList}"
            labelField="@abbrev"
            change="comboBox.text = comboBox.selectedItem.@name;"
            closeDuration="0" />
    

    Peter

  10. The solution for the Yon question is useful to me. I am struggling for the same to implement in my flex project.

    Peter, you rock.

  11. Hi Peter,

    I was wondering if it’s possible to replace the label field with a field that is not a String type, such as image.
    I searched and find several solutions, but they all extends the Combobox object with a new “ImageComboBox” or “IconComboBox” etc. objects.
    Is it possible to do it without create a new class which extends the mx combobox?

    Thanks,
    Myupe.

Comments are closed.