這幾天接觸了flex的很多控件,讓我印象最深刻的就是控件的數(shù)據(jù)綁定幾乎所有控件都可以這樣做,基本上來說原理和html一樣,我自己閑暇時間就整理了有關(guān)復選框可下拉的幾種用法,下面就給大家分享一下。
1.復選框
這里我主要研究的該控件的全選,全不選,反選以及選中的操作,原理也就是也能用selected這個屬性,true表示選中,只需遍歷就能實現(xiàn),此處我使用的是動態(tài)的復選框,頁面代碼如下
復制代碼 代碼如下:
mx:VBox top="50">
mx:VBox>
mx:Canvas width="100%" height="100%" >
mx:Repeater id="rep" dataProvider="{array}">
mx:CheckBox id="checkbox" label="{rep.currentItem.name}" x="{rep.currentItem.x}" data="{rep.currentItem.id}"/>
/mx:Repeater>
/mx:Canvas>
/mx:VBox>
mx:VBox>
/mx:VBox>
/mx:VBox>
s:Button x="90" y="81" label="全選" click="checkAll()"/>
s:Button x="168" y="81" label="全不選" click="checkNotAll()"/>
s:Button x="246" y="81" label="反選" click="reverse()"/>
剛看到可能比較陌生下面我把Array的定義貼出來
復制代碼 代碼如下:
public var array:Array=new Array({"name":"語文","id":"chinese","x":"80"},{"name":"數(shù)學","id":"math","x":"160"},{"name":"英語","id":"english","x":"240"});
這種處理一般是用于動態(tài)的數(shù)據(jù),靜態(tài)的就直接寫了,下面是我的ActionScript
復制代碼 代碼如下:
//全選
private function checkAll():void{
for(var i:int=0;iarray.length;i++){
checkbox[i].selected=true;
all=all+checkbox[i].data+",";
}
Alert.show("選擇了:"+all.substr(0,all.lastIndexOf(",")));
all="";
}
//全不選
private function checkNotAll():void{
for(var i:int=0;iarray.length;i++){
checkbox[i].selected=false;
}
}
//反選
private function reverse():void{
for(var i:int=0;iarray.length;i++){
if(checkbox[i].selected){
checkbox[i].selected=false;
}else{
checkbox[i].selected=true;
}
}
}
很簡單吧,下面是下拉的使用,我的做法是先初始化下拉把數(shù)據(jù)綁定上去,之后根據(jù)需要修改下拉顯示的內(nèi)容,只需合理運用好下拉的selectedItem就可以修改下拉選中的值了
復制代碼 代碼如下:
mx:ComboBox id="subject" x="78" y="149" labelField="name" dataProvider="{array}"/>
下面是頁面加載的初始化方法
PRE class=java name="code">public function init(event:Event):void{
for(var i:int=0;iarray.length;i++){
if("數(shù)學"==array[i].name){
subject.selectedIndex=i;
checkbox[i].selected=true;
}
}
}/PRE>BR>
這里我順便把數(shù)學的復選框弄成了默認選中BR>
看起來代碼有點亂,下面我把整個頁面代碼都貼出來BR>
PRE class=html name="code">?xml version="1.0" encoding="utf-8"?>
s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" initialize="init(event)">
fx:Declarations>
!-- Place non-visual elements (e.g., services, value objects) here -->
/fx:Declarations>
fx:Script>
![CDATA[
import mx.controls.Alert;
public var all:String="";
public var array:Array=new Array({"name":"語文","id":"chinese","x":"80"},{"name":"數(shù)學","id":"math","x":"160"},{"name":"英語","id":"english","x":"240"});
public function init(event:Event):void{
for(var i:int=0;iarray.length;i++){
if("數(shù)學"==array[i].name){
subject.selectedIndex=i;
checkbox[i].selected=true;
}
}
}
//全選
private function checkAll():void{
for(var i:int=0;iarray.length;i++){
checkbox[i].selected=true;
all=all+checkbox[i].data+",";
}
Alert.show("選擇了:"+all.substr(0,all.lastIndexOf(",")));
all="";
}
//全不選
private function checkNotAll():void{
for(var i:int=0;iarray.length;i++){
checkbox[i].selected=false;
}
}
//反選
private function reverse():void{
for(var i:int=0;iarray.length;i++){
if(checkbox[i].selected){
checkbox[i].selected=false;
}else{
checkbox[i].selected=true;
}
}
}
]]>
/fx:Script>
mx:VBox top="50">
mx:VBox>
mx:Canvas width="100%" height="100%" >
mx:Repeater id="rep" dataProvider="{array}">
mx:CheckBox id="checkbox" label="{rep.currentItem.name}" x="{rep.currentItem.x}" data="{rep.currentItem.id}"/>
/mx:Repeater>
/mx:Canvas>
/mx:VBox>
mx:VBox>
/mx:VBox>
/mx:VBox>
s:Button x="90" y="81" label="全選" click="checkAll()"/>
s:Button x="168" y="81" label="全不選" click="checkNotAll()"/>
s:Button x="246" y="81" label="反選" click="reverse()"/>
mx:ComboBox id="subject" x="78" y="149" labelField="name" dataProvider="{array}"/>
/s:Application>
/PRE>BR>
BR>
PRE>/PRE>
P>/P>
PRE>/PRE>
IMG alt="" src="http://img.blog.csdn.net/20130706214231250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbndpbGwz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">