Flex 2 itemRenderer: Bug or bonehead?
Posted by Joe Rinehart at 8:43 AM
3 comments - Categories:
Flex and ColdFusion
I'm starting to work with Flex 2 at night, in between Model-Glue 2.0 and CFUnited presos. I wanted to get the hang of custom item renderers in the list controls last night, so I started fooling around with them.
It went really well for a while: I made a simple list, bound it to a dataprovider, and dropped in an inline renderer that displayed a checkbox next to the label. However, when I check the checkbox and then scroll, wackiness happens: the checkbox may/may not stay checked, others become checked, etc...
You can view this at http://clearsoftware.net/zzztemp/Scratch.swf.
It looks like it has to do with how the control renders things - if I display 5 items, and check the first, then scroll, the sixth is shown as checked as well.
Looking at the code below, can anyone tell me if this is a bug, or if I'm making a boneheaded noob mistake?
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="vertical" width="100%" height="100%">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public function getItems():ArrayCollection {
var i:int;
var items:ArrayCollection = new ArrayCollection();
for (i=0;i<50;i++) {
var item:Object = new Object();
item["label"] = i.toString();
items.addItem(item);
}
return items;
}
]]>
</mx:Script>
<mx:List dataProvider="{getItems()}" width="200" height="200">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas>
<mx:CheckBox id="complete" width="20" x="10" y="4" />
<mx:Text id="taskname" text="{data.label}" x="27" width="100%" y="4" selectable="false" />
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:List>
</mx:Application>
Dirk wrote on 03/24/06 10:19 AM
Two things: call the getItems() function only once (e.g. use the creationComplete event of the Application tag), I guess it's refilling your list too often.Second: clicking on a CheckBox has to modify the dataProvider, otherwise you'll never see the changes (itemRenderers get recycled). Add the following to the CheckBox:
selected="{data.selected}" click="data.selected=complete.selected"
Dirk.