使用复选框在Itemrenderer中选择错误

时间:2012-03-22 15:26:38

标签: flex

我使用'Tilelist'和'HBOX'作为itemrenderer。在HBOX我有复选框。

将arraycollection作为dataprovider传递给TileList(我的arraycollection长度为20)。在选择Tilelist中item1的复选框并滚动列表时,我可以看到item1中的后续项目被选中。在博客中,我发现在使用复选框时存在一些弹性缓存问题。

需要一些帮助。

提前谢谢。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="0" xmlns:local="*" height="500" >
    <mx:Script>
    <![CDATA[
        private var arr:Array = [
            { firstName: "Alex", lastName: "Harui" },
            { firstName: "Gordon", lastName: "Smith" },
            { firstName: "Deepa", lastName: "Subramanian" },
            { firstName: "Matt", lastName: "Chotin" },
            { firstName: "Ely", lastName: "Greenfield" },
            { firstName: "Kevin", lastName: "Lynch" },
            { firstName: "Shantanu", lastName: "Narayan" },
            { firstName: "Joan", lastName: "Lafferty" },
            { firstName: "Ryan", lastName: "Frishberg" },

        ];

    ]]>
    </mx:Script>
     <mx:TileList id="list" initialize="list.dataProvider=arr" labelField="lastName" maxColumns="1" itemRenderer="Checkrenderer" 
                allowMultipleSelection="true" >

    </mx:TileList> 
</mx:Application>

Checkrender HBOX:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="138" height="300" xmlns:local="*">
<mx:CheckBox id="checkbx"/>
</mx:Box>
</mx:HBox>

1 个答案:

答案 0 :(得分:0)

基本上,您需要跟踪dataProvider中数据的选定值,这是因为项目渲染器被“回收”,这意味着它们会在应用了不同的数据时重复使用,以便跟踪它需要附加到与该行关联的数据的给定行的实际选定值。您可以使用我在以下示例中提供的类ValueObjectWithSelected,通过将其分配给value属性来“包装”任何其他VO / DTO,selected属性用于跟踪复选框选择,并且渲染器在设置此属性时复选框选择了值更改。

http://www.shaunhusain.com/CheckboxList/

http://www.shaunhusain.com/CheckboxList/srcview/

修复您的具体情况:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="138" height="300" xmlns:local="*">
    <mx:CheckBox id="checkbx" label="{data.firstName}" change="{data.selected = checkbx.selected}" selected="{data.selected}"/>
</mx:HBox>