flex复选框和下拉列表

这几天接触了flex的很多控件，让我印象最深刻的就是控件的数据绑定几乎所有控件都可以这样做，基本上来说原理和html一样，我自己闲暇时间就整理了有关复选框可下拉的几种用法，下面就给大家分享一下。

1.复选框

这里我主要研究的该控件的全选，全不选，反选以及选中的操作，原理也就是也能用selected这个属性，true表示选中，只需遍历就能实现，此处我使用的是动态的复选框，页面代码如下

        <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":"数学","id":"math","x":"160"},{"name":"英语","id":"english","x":"240"});

这种处理一般是用于动态的数据，静态的就直接写了，下面是我的ActionScript

//全选
			private function checkAll():void{
				
				for(var i:int=0;i<array.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;i<array.length;i++){
					checkbox[i].selected=false;
				}
			}
			//反选
			private function reverse():void{
				
				for(var i:int=0;i<array.length;i++){
					if(checkbox[i].selected){
						checkbox[i].selected=false;
					}else{
						checkbox[i].selected=true;
					}
					
				}
			}

很简单吧，下面是下拉的使用，我的做法是先初始化下拉把数据绑定上去，之后根据需要修改下拉显示的内容，只需合理运用好下拉的selectedItem就可以修改下拉选中的值了

<mx:ComboBox id="subject" x="78" y="149" labelField="name" dataProvider="{array}"/>
下面是页面加载的初始化方法
public function init(event:Event):void{
				
				
				for(var i:int=0;i<array.length;i++){

					if("数学"==array[i].name){
						
						subject.selectedIndex=i;
						checkbox[i].selected=true;
					}
				}
				
			}

这里我顺便把数学的复选框弄成了默认选中

看起来代码有点乱，下面我把整个页面代码都贴出来

<?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":"数学","id":"math","x":"160"},{"name":"英语","id":"english","x":"240"});
			
			public function init(event:Event):void{
				
				
				for(var i:int=0;i<array.length;i++){

					if("数学"==array[i].name){
						
						subject.selectedIndex=i;
						checkbox[i].selected=true;
					}
				}
				
			}
			//全选
			private function checkAll():void{
				
				for(var i:int=0;i<array.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;i<array.length;i++){
					checkbox[i].selected=false;
				}
			}
			//反选
			private function reverse():void{
				
				for(var i:int=0;i<array.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>