Mar
24
2006
Flex 2 itemRenderer: Bonehead!
Posted by Joe Rinehart at 11:22 AM
4 comments - Categories:
Flex and ColdFusion
It looks like I just learned a basic lesson about Flex 2 databinding. Thanks go out to Dirk, who pointed out that I wasn't modifying the data that the checkbox was bound to in my previous post, so that when then item renderer was "recycled," it got "dirty" state.
Here's a revision of my earlier MXML that works properly:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="vertical" width="100%" height="100%">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
var items:ArrayCollection = getItems();
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();
item["selected"] = false;
items.addItem(item);
}
return items;
}
]]>
</mx:Script>
<mx:List dataProvider="{items}" width="200" height="200">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas>
<mx:CheckBox id="complete" width="20" x="10" y="4" selected="{data.selected}" click="{data.selected = complete.selected}"/>
<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>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="vertical" width="100%" height="100%">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
var items:ArrayCollection = getItems();
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();
item["selected"] = false;
items.addItem(item);
}
return items;
}
]]>
</mx:Script>
<mx:List dataProvider="{items}" width="200" height="200">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas>
<mx:CheckBox id="complete" width="20" x="10" y="4" selected="{data.selected}" click="{data.selected = complete.selected}"/>
<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 3:10 PM
You're welcome :)Btw, you don't need to use square brackets if you want to set properties on an Object instance, i.e. this also works: item.label = i.toString();
Dirk.