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>