Strange behaviour of scrolling in flex mobile

Question

working on flex mobile list. list is represented using itemrenderer. here is the itemrendeerer..

<s:Image id="img" x="30" y="50"/>   
        <s:Label id="nameLbl" width="100%" height="100%" text="Label" textAlign="center" verticalAlign="middle"/>
        <s:Button id="checkMarkLabel" label="+" height="100%" />

on selected::

protected function onClicked(event:MouseEvent):void
            {
                if(checkMarkLabel.label =="✓")
                {
                    checkMarkLabel.label = "+";
                }
                else if(checkMarkLabel.label == "+" )
                {
                    checkMarkLabel.label = "✓";
                    trace("id::"+event.currentTarget.data.id)
                    //FlexGlobals.topLevelApplication.selectedId = event.currentTarget.data.id;
                }
                
            }

the image gives you the clear picture. after selecting some items in the list,if i scroll the list,the checked items gets unchecked and the unchecked items gets checked.any answer is appreciable..

Answer 1

Flex don't create renderer for each item in list instead Flex create few renderers (in your case 6) and reuse them.

You must save data about clicked list items (maybe use some singleton), and then you must override set data method in renderer class (in this method you get list item for renderer), then you figure out clicked this item or not and set to checkMarkLabel corresponded symbol.

Answer 2

On the list you can set the property "useVirtualLayout" to false. This will generate an unique itemrenderer for each item in the list. This is also what Anton was talking about. This is however less resource friendly. If your list get's really large it will take up more memory.

You should work with states that are already made use of by lists in combination with itemrenderers.

Example itemrenderer:

<fx:Script>
    <![CDATA[
        protected function marker_clickHandler(event:MouseEvent):void {
            marker.label = marker.label == "V" ? "+" : "V";
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="normal"/>
    <s:State name="selected"/>
</s:states>

<s:Button label.selected="V" label.normal="+"/>
<s:Button y="10" id="marker" click="marker_clickHandler(event)" label="+"/>

If you were to use this as an itemrenderer, the button utilizing states will update as expected, but like Anton mentioned, the ones marked manually onClick will not get updated as expected.

Answer 3

This answer builds on Robin van den Bogaard's answer.

Assuming your current dataProvider has objects that look like this:

public class MyData {
    [Bindable]
    private var imgUrl:String;
    [Bindable]
    private var name:String;
}

Add a new field to it:

    [Bindable]
    private var chosen:Boolean;

(If you don't have [Bindable], add it to enable data binding on the data items.)

Then your itemRenderer can look like this, automatically updating as you scroll:

<fx:Script>
    <![CDATA[
        protected function marker_clickHandler(event:MouseEvent):void {
            data.chosen = !data.chosen;
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="normal"/>
    <s:State name="selected"/>
</s:states>

<s:Image id="img" x="30" y="50" source="{data.imgUrl}" />   
    <s:Label id="nameLbl" width="100%" height="100%" text="Label" textAlign="center" verticalAlign="middle" text="{data.name}" />
    <s:Button id="checkMarkLabel" label="{data.chosen ? '✓' : '+'}" height="100%" click="marker_clickHandler(event)" />