Display List ItemRenderer Index in Flex3 - apache-flex

Question

Is there a direct way to get the item index of the data inside an itemRenderer? I need to display the item number against each item. I am currently doing a workaround and won't allow reuse of my itemRenderer component.
var index:int = model.dataColl.getItemIndex(data) + 1;
itemNo = index.toString();
This is what i am using now, it works, but the concepts of component reuse and data abstraction are compromised.
I am using Flex 3.

Answer 1

The first answer seems to be working, but slow. It takes O(n^2) time as it runs through dataProvider array to get item index each time.
We can access rowIndex from listData - it represents index of the current visible item. Vertical scroll position from parent List represents the amount of scrolled items:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.controls.listClasses.IDropInListItemRenderer">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.ListBase;
[Bindable] private var index:int = 0;
private var _listData:BaseListData;
public function get listData():BaseListData
{
return _listData;
}
public function set listData(value:BaseListData):void
{
_listData = value;
}
override public function set data(value:Object):void
{
super.data = value;
if (data && listData)
index = _listData.rowIndex + ListBase(_listData.owner).verticalScrollPosition;
else
index = 0;
}
]]>
</mx:Script>
<mx:Label text="{index}"/>
<mx:Label text="{data.toString()}"/>
</mx:HBox>

Answer 2

You can use labelFunction to solve your problem. For the simple test application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="init()" layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private static const DATA_LENGTH:Number = 100;
[Bindable]
private var dp:ArrayCollection;
private function countFinction(item:Object):String
{
return (dp.getItemIndex(item) + 1).toString();
}
private function init():void
{
var dataArray:Array = [];
for (var i:int = 0; i < DATA_LENGTH; i++)
{
var item:Object = { firstName: "First" + (i + 1), lastName: "Last" + (i + 1) };
dataArray.push(item);
}
dp = new ArrayCollection(dataArray);
}
]]>
</mx:Script>
<mx:List dataProvider="{dp}" height="500" horizontalCenter="0" itemRenderer="TestRenderer"
labelFunction="countFinction" verticalCenter="0" width="500" />
</mx:Application>
You can use the following test renderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox implements="mx.controls.listClasses.IDropInListItemRenderer" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.BaseListData;
private var _listData:BaseListData;
/**
* #inheritDoc
*/
public function get listData():BaseListData
{
return _listData;
}
[Bindable(event = "listDataChanged")]
/**
* #inheritDoc
*/
public function set listData(value:BaseListData):void
{
if (value == _listData)
return;
_listData = value;
dispatchEvent(new Event("listDataChanged"));
}
]]>
</mx:Script>
<mx:Label fontWeight="bold" text="{listData.label}" />
<mx:Label text="{data.firstName + ' ' + data.lastName}" />
</mx:HBox>

Answer 3

Item renderer has an item index property on it.
this.itemIndex
Sample:
<s:List>
<s:dataProvider>
<s:ArrayList>
<fx:String>Item 1</fx:String>
<fx:String>Item 2</fx:String>
<fx:String>Item 3</fx:String>
<fx:String>Item 4</fx:String>
<fx:String>Item 5</fx:String>
<fx:String>Item 6</fx:String>
</s:ArrayList>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:HGroup>
<s:Label text="This index is: {this.itemIndex}" />
<s:Label text="{data}" />
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>