Flex <s:List> Itemrender Index

Question

Is there a way within a <s:List> item renderer in Flex (4.6) to identify the index of a particular item in the list, within the item renderer itself?

I tried using the itemIndex property of the class, but it always returned zero. Also, this example on SO gave me several runtime errors.

Thank you for your time.

Answer 1

I just noticed that itemIndex wasn't working because its value yet hadn't been set during the life cycle of the list's creation.

Within the item renderer I was listening for an addedToStage event and used itemIndex within its handler. Once I changed the addedToStage event to creationComplete, itemIndex then had the proper value.

Hope that helps someone.

Answer 2

Main application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
    width="100%"
    height="100%"
    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:List itemRenderer="IndexedItemRenderer">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>Item A</fx:String>
                <fx:String>Item B</fx:String>
                <fx:String>Item C</fx:String>
                <fx:String>Item D</fx:String>
                <fx:String>Item E</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
</s:Application>

IndexedItemRenderer item renderer:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer
    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">
    <s:Label text="{itemIndex + 1}. {data}"/>
</s:ItemRenderer>