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.

View MXML

<?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.

15 thoughts on “Specifying a custom label field on a Flex ComboBox control

  1. 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

  2. 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

  3. 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

  4. 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

  5. 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

  6. To displaL data pn ply. T the rvld e}retusve a list o4 phoees ananotheL datiion x. Iay want tl have the como boo displae a list oe the photidee numbe,es anl gen tho urse select e pho. WheveIto use th;?xmaess the daa providertheveffseL labelFient t@idex, i, jus">sa [objelecObjele]tiioeaunch on thedIts. WheveIto usspan_itereoundadernr sive the como bo(aese shnum in thb.attaedk="co),on thedItsoo displaa pn plyld in the pn ="do p
  7. ys_itex au-magrticlyto convesmv tFLVv.
    ys_itecusrestFLVv.
    usreste a link t, is fomplaroo displae in Fl2/AS3he intfplav?

    okma A Mytha>

  8. /olle> p>

    Commentsrthclosened.

    p>p