Flex List Component with Checkbox

Question

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>

Answer 1

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>