The following example shows how you can format the label in a ComboBox using a custom label function.
Full code after the jump.
<?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 comments… read them below or add one }
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!
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
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
I just LOVE your site and the time that you put into sharing this info. Thank you.
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
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
coco
You can find Flex books in Chinese in this webSite http://www.zhuoqun.net.
Hope to help you.
dormouse
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!
Lovely conepts that you give us……thankyou
Thanks a lot Peter. I’m from India and you are indeed providing us all loads of value.
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.
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
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
Yea, it works great!
Thanks man
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.
thats good help
thanks
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.