Detecting an item click event on a Spark List control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/14/detecting-an-item-click-event-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemClick_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">
    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;
            import spark.events.IndexChangeEvent;
 
            protected function init():void {
                lst.addEventListener(ItemClickEvent.ITEM_CLICK, lst_itemClickHandler);
            }
 
            protected function lst_itemClickHandler(evt:ItemClickEvent):void {
                addAndAutoScroll(evt);
            }
 
            protected function lst_changeHandler(evt:IndexChangeEvent):void {
                addAndAutoScroll(evt);
            }
 
            protected function addAndAutoScroll(obj:Event):void {
                arrList.addItem({time:now(), type:obj.type, item:obj.currentTarget.selectedItem});
                grid.validateNow();
                grid.verticalScrollPosition = grid.maxVerticalScrollPosition;
            }
 
            protected function now():String {
                return new Date().toTimeString();
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            itemRenderer="skins.CustomItemClickItemRenderer"
            horizontalCenter="0" verticalCenter="0"
            initialize="init();"
            change="lst_changeHandler(event)">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="8" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine]" />
        </s:dataProvider>
    </s:List>
 
    <mx:DataGrid id="grid" verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn dataField="time" width="150" />
            <mx:DataGridColumn dataField="type" />
            <mx:DataGridColumn dataField="item" />
        </mx:columns>
        <mx:dataProvider>
            <mx:ArrayList id="arrList" />
        </mx:dataProvider>
    </mx:DataGrid>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/14/detecting-an-item-click-event-on-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="CustomItemClickItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        autoDrawBackground="true"
        click="itemrenderer1_clickHandler(event);">
 
    <fx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;
 
            protected function itemrenderer1_clickHandler(evt:MouseEvent):void {
                var e:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true);
                e.item = data;
                e.index = itemIndex;
                dispatchEvent(e);
            }
        ]]>
    </fx:Script>
 
    <s:Label id="labelDisplay"
            left="3" right="3" top="5" bottom="5" />
 
</s:ItemRenderer>