Flex Mobile防止回收项目渲染器状态

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.