Specifying a custom label field on a Flex ComboBox control
The following example shows how you can specify a custom label field for a ComboBox control by using the ComboBox class’s labelField property.
The labelField property controls which field in the data provider will be used as the ComboBox item’s label. By default, the labelField property is “label”, although if you are using an XML data provider, you may want to change the labelField property to “@label”, or some other value.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/25/specifying-a-custom-label-field-on-a-flex-combobox-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<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}"
labelField="@name" />
</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.
15 Responses to Specifying a custom label field on a Flex ComboBox control
Leave a Reply Cancel reply
-
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


Hi, peterd
i am so sorry here to trouble you, but i have no idea to solve the problem.So i just to come here to get a help from you,how to play .wmv in the flex. In flex, it can play .swf and .flv, but can not play .wmv, i search it in the internet, the solution is convert .wmv to .flv. But it is so boring, do you have another method?
Sorry again…
dormouse
dormouse,
Sorry, currently the Flash Player does not support WMV files. I’m afraid you’ll have to convert to either SWF or FLV files, like you mentioned.
Peter
Hey, nice website!
I was woundering how to make the selected value different from the label value. In the example above how would I obtain the value of abbrev?
You’ve been a great help!
Thanks,
Greg
Greg,
To display the “abbrev” instead of the “name”, you could use the following code:
<mx:ComboBox id="comboBox" prompt="Please select a State..." dataProvider="{statesXMLList}" labelField="@abbrev" />Peter
Hey thanks. But I’d like to continue to use the same label, just access the data of another attribute. So somewhere in my application perform a query on the value of abbrev.
Say I have a list of employees and employee numbers:
etc..
How would I display name in the combo box but access empnum in the code?
Thanks for your help!
Greg
Greg,
You mean like this?:
Peter
I posted this in the Adobe flex builder 3 forum, but I’ll ask you as well:
I can’t get the combobox to display data properly. The server returns a list of photos and other data in xml. I want to have the combobox display a list of the photo id numbers, and let the user select a photo. When I use the xml as the dataprovider, then set LabelField to @id, it just says [object Object] in each of the items. When I use an item renderer inside the combobox (as shown in the attached code), the items display properly in the drop down part, but the Prompt is replaced with [object Object] and when an item is selected it shows as [object Object].
Any ideas on how to fix this?
Doug,
I replied in the forum. Would you mind posting a sample of the XML in the Adobe forums (my blog comments are pretty hard to paste code into) and I can try and take a look.
Peter
Is it possible to script the encoding of wmv to flv when a user uploads the wmv file?
example:
User uploads WMV through Flex2/AS3 interface
System auto-magically converts to FLV
System stores FLV
Stores a link to it for later display in Flex2/AS3 interface
cheers,
Smark A Myth
smarkamyth,
I’ve never tried it, but I’m sure it is possible. You’d need a way to convert videos using a command line, I imagine.
Something like:
1) User uploads a WMV/source video file using FileReference (or HTML or whatever).
2) Server-side script (ColdFusion, PHP, ASP.NET, Perl, Ruby, Java, etc) calls a command-line script to convert the video file from formatX to formatY (or even copies/FTPs the video file to a separate server for transcoding).
3) Once transcoding is complete, delete the original WMV/source video file and store the FLV back on the web server (or wherever).
I imagine the tricky part is finding the appropriate conversion software that works best for you.
You may have better luck asking on a high-traffic list, such as FlexCoders.
Peter
Sorry for posting to an old thread, In your original example, how would I get the labelField of the combobox to display “(@abbrev) @name”. e.g. “(CA) California”.
I’ve tried some labelFunctions, but though they work well with datagrids, I can’t seem to find out how to make them work with ComboBoxes.
Your help would be greately appreciated.
Cheers
Steve.
Sorry, didn’t read your other post on ComboBox labelFunctions :}
http://blog.flexexamples.com/2007/09/25/creating-a-simple-label-function-on-a-flex-combobox-control/
Thanks
Steve
Merci encore pour ce super site!
Hi Mr Peterd,
I am BinhNguyen,
I have a problem about AutoComplete extends from Combobox control .
I want set Text property of it = “” when click reset button.
folow my code :
// code hander reset
public function reset_click(){
AC.promt=”";
AC.seletedIndex=-1;
AC.text=”";
}
It not good!
Please , can you help me ?
Thanks, best regard!
Hi guys i want to show both abbrevation and name in the same combobox can anyone help me