Creating a custom ComboBox item renderer in Flex

The following example shows how you can create a simple ComboBox item renderer which displays multiline items in the ComboBox control’s drop down menu

<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2007/09/25/creating-a-custom-combobox-item-renderer-in-flex/  -->
< 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}"
            rowCount ="3"
            labelField ="@name"
            itemRenderer ="ComboBoxItemRenderer"   />

</ mx:Application >

ComboBoxItemRenderer.mxml:

<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2007/09/25/creating-a-custom-combobox-item-renderer-in-flex/  -->
< mx:VBox  xmlns:mx ="http://www.adobe.com/2006/mxml"
        styleName ="plain" >

     < mx:Label  text ="{data.@name}"
            fontSize ="11"
            fontWeight ="bold"   />
     < mx:Label  text ="{data.@abbrev}"
            fontSize ="9"
            paddingLeft ="10"   />

</ mx:VBox >