Flex中利用Repeater显示一组CheckBox控件的例子

和前面Flex中利用Repeater显示一组RadioButton控件的例子非常类似的，接下来的例子中演示了Flex中如何Repeater作为一个数据提供源，用来显示一组CheckBox控件。

让我们先来看一下Demo（

可以右键View Source或点击这里察看源代码

）

：

面是完整代码(或点击这里查看)：
Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.CheckBox;

private function button_click(evt:Event):void {
var selArr:Array = [];
var idx:int;
var len:int = arr.length;
for (idx=0; idx<len; idx++) {
if (checkBox[idx].selected) {
selArr.push(checkBox[idx].label);
}
}

var title:String = selArr.length + " of " + len + " item(s) selected.";
var message:String = selArr.join("n");
Alert.show(message, title);
}

private function doFilter(element:*, index:int, arr:Array):Boolean {
return element.selected;
}

private function checkBox_change(evt:Event):void {
var ch:CheckBox = evt.currentTarget as CheckBox;
Alert.show(ch.getRepeaterItem().data);
}
]]>
</mx:Script>

<mx:Array id="arr">
<mx:Object label="Red" data="red" />
<mx:Object label="Orange" data="haloOrange" />
<mx:Object label="Yellow" data="yellow" />
<mx:Object label="Green" data="haloGreen" />
<mx:Object label="Blue" data="haloBlue" />
</mx:Array>

<mx:Panel id="panel" width="50%" paddingLeft="10" verticalGap="10">
<mx:Repeater id="checkBoxRepeater" dataProvider="{arr}">
<mx:CheckBox id="checkBox"
label="{checkBoxRepeater.currentItem.label}"
data="{checkBoxRepeater.currentItem.data}"
change="checkBox_change(event);" />
</mx:Repeater>
<mx:ControlBar horizontalAlign="right">
<mx:Button id="button"
label="Click me"
emphasized="true"
click="button_click(event);" />
</mx:ControlBar>
</mx:Panel>

</mx:Application>