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

The following example shows how you can dispatch an itemClick event on a Spark List control in Flex 4 by creating a custom item renderer which listens for the click event and redispatches an itemClick event object.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?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>

And the custom Spark item renderer, skins/CustomItemClickItemRenderer.mxml, is as follows:

<?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>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

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

  1. Hi Peter, do you know the reasons for the removal of the itemClickEvent in spark list?
    It seems that it was one of the most used event in the halo list, and it’s kind of a drag to have to create a custom event/itemRenderer every time we need it for a spark list…
    Is is for performance reason?
    Do you know if the is a bug/feature request in the JIRA about this?
    thanks.

  2. I am trying to compile this example using command line compilation, and I get the following error:

    Error: Definition skins:CustomItemClickItemRenderer could not be found.

    The file ./skins/CustomItemClickItemRenderer.mxml is present, but I don’t understand how the compiler is suppose to link the two??

  3. Great tip! It helped me a great deal!

    The only thing I would add is to pay close attention to the ‘true’ value for the ‘bubbles’ parameter on the ‘dispatchEvent’ call. That’s the part that actually makes the event dispatch on the List work. (It threw me through a loop at first)

  4. Hi!

    im implementing your code for an App, and it works fine, but i get a bug that i cant remove.

    i need only to dispatch the event when i click on an item.
    When i click on the List scroller the event is also dispached and…error appear.

    How can i fix it?

    thanx!!

Comments are closed.