R – Flex List Component with Checkbox

flex3, flexbuilder

I am trying to add a checkbox to a List component in my application and everything works seeming well until I scroll through my data.

As I scroll vertically in my List, any checks I may have added start to get added to other items in my List, sometimes the original item I checked is not even checked anymore.
For example, my List height is enough to see 5 items, I check Item 1, scroll down and every 5th item starts to get checked.

It's really odd and I have not been able to figure out why it is doing this. I looked at some examples online, and I'm not doing anything any different as far as I can tell.

I ran some traces and the Checkbox datachange event fires as I scroll through my list, but again, I am not sure why.

Here is the mxml test page for my List.

Any help is appreciated, thanks.


<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">    <mx:Array id="arr">        <mx:Object label="One" />        <mx:Object label="Two" />        <mx:Object label="Three" />        <mx:Object label="Four" />        <mx:Object label="Five" />        <mx:Object label="Six" />        <mx:Object label="Seven" />        <mx:Object label="Eight"/>        <mx:Object label="Nine" />        <mx:Object label="Ten" />        <mx:Object label="Eleven" />        <mx:Object label="Twelve" />    </mx:Array>    <mx:List        id="addrList"        height="100"        width="100%" fontSize="10"        borderStyle="solid"        borderColor="#000000"        borderThickness="1"        dataProvider="{ arr }">        <mx:itemRenderer>            <mx:Component>                <mx:CheckBox                    change="trace('change')"                    dataChange="trace('dataChange')"/>            </mx:Component>        </mx:itemRenderer>    </mx:List></mx:Application>

Best Solution

your putting an object to a list dataprovider, dataprovider supports text only

try this

<mx:Script>        <![CDATA[            [Bindable]            private var arr:Array = ["a","b","c","d","e","f","g"];        ]]>    </mx:Script>    <mx:List        id="addrList"        height="100"        width="100%" fontSize="10"        borderStyle="solid"        borderColor="#000000"        borderThickness="1"        dataProvider="{ arr }">        <mx:itemRenderer>            <mx:Component>                <mx:CheckBox change="trace('change')"                dataChange="trace('dataChange')"/>            </mx:Component>        </mx:itemRenderer>    </mx:List>