The following example shows how you can display a series of CheckBox controls using the Flex Repeater with an Array data provider.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/29/displaying-checkbox-controls-using-the-repeater-in-flex/ -->
<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>
View source is enabled in the following example.
{ 10 comments… read them below or add one }
oh common! no demo app today? gettin lazy now huh? ;P
steve,
SWF posted.
Peter
good!
clean!
How can add checkbox in a Datagrid…? and print the content of the row for a selected checkbox.
Awesome example, thanks for the help!
How can we select and delect all checkboxes in repeater by clicking on a button
Taqi,
Something like this:
<?xml version="1.0" encoding="utf-8"?> <mx:Application name="Repeater_CheckBox_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.CheckBox; private function button_click(evt:Event):void { var idx:int; var len:int = arr.length; for (idx=0; idx<len; idx++) { // invert: //checkBox[idx].selected = !checkBox[idx].selected; // toggle: checkBox[idx].selected = button.selected; } } ]]> </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}" /> </mx:Repeater> <mx:ControlBar horizontalAlign="right"> <mx:Button id="button" label="Toggle all checkboxes" toggle="true" emphasized="true" click="button_click(event);" /> </mx:ControlBar> </mx:Panel> </mx:Application>You can comment/uncomment some of the ActionScript logic based on if you want to toggle or invert the selected items.
Peter
Hello friend, first let me say that the post is very good and I’m here again to ask you one more help. I’m trying to use mx: Repeater for a repetition of a Canvas, the problem is that I’m doing it and seeking the data in a database with php and I do not know how. Can you help me? Below the code to better understand:
Flex in the file:
<mx:Repeater id=”myRepeater” dataProvider=”{dataCont.lastResult.xmlrecCont.xmlRepeater}” >
<mx:Canvas width=”80%” height=”80″ backgroundColor=”#E3E3E3″ left=”10″ top=”85″ themeColor=”#4BB6B7″ borderColor=”#BFBEBE” cornerRadius=”5″ borderStyle=”solid” borderThickness=”1″>
<mx:Label text=”RI:” left=”5″ top=”5″ width=”28″ height=”20″ fontWeight=”bold”/>
<mx:Label text=”Tipo:” left=”5″ top=”30″ width=”35″ height=”20″ fontWeight=”bold”/>
<mx:Label text=”Razão Social:” left=”75″ top=”5″ width=”80″ height=”20″ fontWeight=”bold”/>
<mx:Label text=”Data:” width=”40″ height=”20″ right=”138″ top=”30″ fontWeight=”bold”/>
<mx:Label text=”Número Contrato” width=”110″ height=”20″ right=”68″ top=”55″ fontWeight=”bold”/>
<mx:Label text=”Situação:” width=”60″ height=”20″ top=”55″ fontWeight=”bold” left=”5″/>
<mx:Label width=”30″ height=”20″ top=”5″ left=”41″ text=”{dataCont.lastResult.xmlrecCont.xmlRI}” textAlign=”left”/>
<mx:Label width=”80″ height=”20″ top=”30″ left=”41″ text=”{dataCont.lastResult.xmlrecCont.xmlTpo}”/>
<mx:Label width=”80″ height=”20″ top=”55″ left=”75″ text=”{dataCont.lastResult.xmlrecCont.xmlSit}”/>
<mx:Label width=”70″ height=”20″ top=”55″ right=”5″ text=”{dataCont.lastResult.xmlrecCont.xmlId_cont}”/>
<mx:Label height=”20″ top=”5″ text=”{dataCont.lastResult.xmlrecCont.xmlRazso_no}” textAlign=”left” left=”160″ right=”5″/>
<mx:Label width=”135″ height=”20″ right=”5″ top=”30″ text=”{dataCont.lastResult.xmlrecCont.xmlDate}”/>
</mx:Canvas>
</mx:Repeater>
In the PHP file:
<?php
require_once(“conexao.php”);
$id_rep = “1″;
$mysql_select = “SELECT * FROM projcont WHERE id_rep = ‘$id_rep’”;
$mysql_query = mysql_query($mysql_select);
$mysql_fetch = mysql_fetch_array($mysql_query);
$cto = “<xmlrecCont>”;
if($mysql_query) {
$cto .= “<xmlRepeater>”;
$cto .= $mysql_fetch = mysql_fetch_array($mysql_query);
$cto .= “</xmlRepeater>”;
$cto .= “<xmlRI>”;
$cto .= $mysql_fetch['ID_cad'];
$cto .= “</xmlRI>”;
$cto .= “<xmlRazso_no>”;
$cto .= $mysql_fetch['razso_no'];
$cto .= “</xmlRazso_no>”;
$cto .= “<xmlTpo>”;
$cto .= $mysql_fetch['tpo'];
$cto .= “</xmlTpo>”;
$cto .= “<xmlData>”;
$cto .= $mysql_fetch['data'];
$cto .= “</xmlData>”;
$cto .= “<xmlSit>”;
$cto .= $mysql_fetch['sit'];
$cto .= “</xmlSit>”;
$cto .= “<xmlId_cont>”;
$cto .= $mysql_fetch['id_cont'];
$cto .= “</xmlId_cont>”;
} else {
$cto .= “Error mysql_query”;
}
$cto .= “</xmlrecCont>”;
echo($cto);
?>
Thank you already!
@Peter deHaan:
Thanks! your comment is very helpful! Exactly what i needed!
Thanks again!!
great work peter.