Flex Examples
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.
<?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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
-
Add Widgets (Content Sidebar)
This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.
17 Responses to Creating a simple label function on a Flex ComboBox control
-
Categories
- Accordion
- AccordionHeader
- ActionScript
- AddChild
- AdvancedDataGrid
- Alert
- alpha
- Animate
- AnimateProperties
- Application
- Application (Spark)
- ArrayCollection
- BarChart
- baseColor
- beta
- beta1
- beta2
- Bitmap
- Bitmap/BitmapData
- BitmapData
- BitmapFill
- BitmapFill (Spark)
- BitmapGraphic
- BitmapImage
- BitmapImage (Spark)
- BitmapImageResizeMode
- Border (Spark)
- BorderContainer (Spark)
- Box
- BuildInfo
- Button
- Button (Spark)
- ButtonBar
- ButtonBar (Spark)
- ByteArray
- Camera
- Charting
- CheckBox
- CheckBox (Spark)
- ClassFactory
- CollectionEvent
- Color
- ColorPicker
- ColorUtil
- ComboBox
- ComboBoxArrowSkin
- Compiler
- Component
- Component (Spark)
- Configuration
- Container
- ContextMenu
- ContextMenuEvent
- ContextMenuItem
- CSSCondition
- CSSSelector
- CSSStyleDeclaration
- CurrencyFormatter
- CursorManager
- Data Binding
- DataGrid
- DataGrid (Spark)
- DataGridColumn
- Date
- DateBase
- DateChooser
- DateField
- DateFormatter
- Debugging
- DefaultComplexItemRenderer
- DefaultTileListEffect
- DropDownList
- DropDownList (Spark)
- DropDownListButtonSkin
- DropDownListSkin
- DropShadowFilter
- E4X
- Effects
- Ellipse
- EmailValidator
- Embed
- Event
- Fade
- FileFilter
- FileReference
- fill
- Filters
- Flash
- Flash Integration
- FlashVars
- Flex 3 SDK
- Flex Builder
- Flex Builder 3
- Flex SDK
- Flex4
- FLVPlayback
- FocusManager
- FontLookup
- Fonts
- Form
- Form (Spark)
- FormHeading (Spark)
- FormItem
- FormItem (Spark)
- Forms
- FTETextField (Spark)
- FullScreen
- FullScreenEvent
- FxAnimateColor
- FxButtonBar
- FxCheckBox
- FXG
- FxHScrollBar
- FxHSlider
- FxList
- FxNumericStepper
- FxRadioButton
- FxRotate3D
- FxScroller
- FxTextArea
- FxTextInput
- FxToggleButton
- FxVScrollBar
- FxVSlider
- getStyleDeclaration()
- GradientEntry
- Graphic (Spark)
- HBox
- HDividedBox
- HGroup (Spark)
- HorizontalLayout
- HorizontalList
- HSBColor (Spark)
- HScrollBar (Spark)
- HSlider
- HSlider (Spark)
- HTML template
- ID3Info
- Image
- Image (Spark)
- ImageSnapshot
- itemRenderer
- JointStyle
- Label
- Label (Spark)
- Legend
- LegendItem
- LigatureLevel
- Line
- LinearGradientStroke
- LineScaleMode
- LinkBar
- LinkButton
- List
- List (Spark)
- Menu
- MenuBar
- Metadata
- MetadataEvent
- Model
- Mouse
- MouseCursor
- MouseEvent
- Move
- Namespace
- NavigatorContent (Spark)
- needsSWF
- NetConnection
- NetStream
- Nightly Builds
- NumberBaseRoundType
- NumberFormatter
- NumberValidator
- NumericCompare
- NumericStepper
- NumericStepper (Spark)
- ObjectProxy
- ObjectUtil
- paddingLeft
- paddingRight
- Panel
- Panel (Spark)
- Parallel
- Path
- PieChart
- PieSeries
- PieSeriesItem
- PopUpAnchor (Spark)
- PopUpButton
- PopUpManager
- ProgrammaticSkin
- ProgressBar
- PropertyChangeEvent
- QName
- RadialGradient
- RadioButton
- RadioButton (Spark)
- RadioButtonGroup
- RadioButtonGroup (Spark)
- Rect
- RegExp
- Regular Expressions
- Repeater
- RichEditableText
- RichText
- RichText (Spark)
- RichTextEditor
- Rotate
- Rotate3D (Spark)
- Scroller (Spark)
- Sequence
- setStyle()
- SimpleText
- SimpleText (Spark)
- skinClass
- Slider
- SliderEvent
- SolidColor
- SolidColorStroke
- Sort
- SortField
- Sound
- SoundEffect
- Spinner (Spark)
- SpriteVisualElement (Spark)
- StageDisplayState
- States
- StringUtil
- StringValidator
- StyleManager
- Styles
- SWFLoader
- SWFObject
- System
- SystemManager
- TabBar
- TabBar (Spark)
- TabNavigator
- TabStopFormat
- Text
- Text Layout Framework (TLF)
- TextArea
- TextArea (Spark)
- TextBox
- TextConverter
- TextEvent
- TextFlow
- TextFlowUtil
- TextFormat
- TextGraphic
- TextInput
- TextInput (Spark)
- TextLayoutFormat
- TextView
- Themes
- TileLayout
- TileList
- TileOrientation
- Timer
- TitleWindow
- TitleWindow (Spark)
- TLF
- ToggleButton (Spark)
- ToggleButtonBar
- ToolTip
- Transition
- Tree
- TruncationOptions
- UIComponent
- UIFTETextField
- Updater
- URLLoader
- URLRequest
- URLUtil
- URLVariables
- ValidationResultEvent
- Validator
- Validators
- VBox
- VDividedBox
- Vector
- VerticalLayout
- VerticalLayout (Spark)
- VGroup (Spark)
- Video
- VideoDisplay
- VideoElement
- VideoElement (Spark)
- VideoEvent
- VideoPlayer (Spark)
- VideoPlayerScrubBar
- ViewStack
- VScrollBar (Spark)
- VSlider
- VSlider (Spark)
- XML
- XMLList
- XMLListCollection
- ZipCodeValidator
- ZipCodeValidatorDomainType
- Zoom
-
Articles
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
-
Meta


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.