Flex mobile prevent item renderer state from recycled - list

Question

I have this custom list item renderer where I have defined 2 custom states:
<s:states>
<s:State name="expand"/>
<s:State name="collapse"/>
</s:states>
When I select one of the list item, it will change to state collapse. Now whenever I select the first or the last item in the list and I refresh the data provider, the current state of both the items will swap places.
Please guide me on how to retain the state of the itemrenderer. Thank you.
Note: It all works well when I change the usevirtuallayout to false. But, it is not what I intended to change.
[Edit]
The following is my code for the item renderer:
<fx:Script>
<![CDATA[
protected function init(event):void
{
currentState = "collapse";
}
override public function set data(value:Object):void
{
trace(currentState.toString());
}
protected function btn_clickHandler(event:MouseEvent):void
{
currentState = "expand";
}
]]>
</fx:Script>
<s:states>
<s:State name="expand"/>
<s:State name="collapse"/>
</s:states>
<s:Button id="changeStateButton" click="btn_clickHandler(event)"/>
The example above is a simple item renderer where a single button will change the currentState of the itemrenderer. I have 3 items in the data provider and each one of them is in the "collapse" state by default. This is the trace result from the set data function:
collapse
collapse
collapse
When I click the button at the last item... this will be the trace result:
collapse
collapse
expand
Now, when I refresh the data provider by calling this function "arraycollection.refresh()"...this is the result:
expand
collapse
collapse
Can somebody explain this scenario? Notice that this only happens when the useVirtualLayout is set to true...

Answer 1

Try reassigning the item renderer after updating the data provider.
//update data provider
itemList.dataProvider = myCollection;
//update the item renderer
itemList.itemRenderer = new ClassFactory(cutomItemRenderer);
This solution of course will be more resource intensive.