ListExtraRowExample.mxml

<?xml version="1.0"?>
<!-- Simple example to demonstrate the List Control -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#ffffff" backgroundGradientColors="[#ffffff,#ffffff]" xmlns:local="*" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var selectedItem:Object;
            
            
       ]]>
    </mx:Script>


    <mx:Model id="mystates">
      <states>
        <state label="Alabama" data="AL"/>
        <state label="Alaska"  data="AK"/>
        <state label="Arizona" data="AZ"/>
        <state label="Arkansas" data="AR"/>
        <state label="California" data="CA"/>
        <state label="Colorado" data="CO"/>
        <state label="Connecticut" data="CT"/>
      </states>
    </mx:Model>

    <mx:Panel title="List Control Example" height="100%" width="100%" 
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:Label text="Select a state to see its abbreviation."/>
        
        <mx:HBox width="100%">
            <mx:List id="problemo" width="100%" color="blue"
                dataProvider="{mystates.state}" variableRowHeight="true" rowHeight="30"
                change="this.selectedItem = List( event.target ).selectedItem"/>
            <local:CustomList id="source" width="100%" color="blue"
                dataProvider="{mystates.state}" variableRowHeight="true" rowHeight="30"
                change="this.selectedItem = CustomList( event.target ).selectedItem"/>
        </mx:HBox>

        <mx:VBox width="100%">
            <mx:Label text="Selected State: {selectedItem.label}"/>
            <mx:Label text="State abbreviation: {selectedItem.data}"/>
        </mx:VBox>

    </mx:Panel>
</mx:Application>