Creating a custom multi-column item renderer for the Spark List control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/09/creating-a-custom-multi-column-item-renderer-for-the-fxlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_itemRenderer_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            private function lst_labelFunc(item:Object):String {
                return item.name + "\t" + currFormatter.format(item.price);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <mx:CurrencyFormatter id="currFormatter" precision="2" />
    </fx:Declarations>
 
    <s:List id="lst"
            labelFunction="lst_labelFunc"
            itemRenderer="skins.TabItemRenderer"
            horizontalCenter="0" verticalCenter="0"
            width="200" height="112">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object name="The"   price="0.23" />
                <fx:Object name="quick" price="1.03" />
                <fx:Object name="brown" price="0.98" />
                <fx:Object name="fox"   price="1.19" />
                <fx:Object name="jumps" price="0.28" />
                <fx:Object name="over"  price="0.42" />
                <fx:Object name="the"   price="0.09" />
                <fx:Object name="lazy"  price="0.81" />
                <fx:Object name="dog"   price="0.72" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/09/creating-a-custom-multi-column-item-renderer-for-the-fxlist-control-in-flex-gumbo/ -->
<s:ItemRenderer name="TabItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        autoDrawBackground="true">
    <!-- states -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
    </s:states>
 
    <s:RichText id="labelDisplay"
            tabStops="D160"
            verticalCenter="0"
            left="3" right="3" top="6" bottom="4" />
 
</s:ItemRenderer>