Flex基础控件--ComboBox

ComboBox在flex中非常好用，唯一可以说是难点的是combobox的数据反绑。

我先从简单的讲起，以下是flex tour 中的一个最简单的使用例子，主要是熟悉下这个控件的属性。

<!-- Simple example to demonstrate the ComboBox control. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[0x000000,0x323232]" viewSourceURL="srcview/index.html"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; [Bindable] public var cards:ArrayCollection = new ArrayCollection( [ {label:"Visa", data:1}, {label:"MasterCard", data:2}, {label:"American Express", data:3} ]); private function closeHandler(event:Event):void { myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.label; myData.text = "Data: " + ComboBox(event.target).selectedItem.data; } ]]--> </mx:Script> <mx:Panel title="ComboBox Control Example" height="75%" width="75%" layout="horizontal" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" color="0xffffff" borderAlpha="0.15"> <mx:ComboBox dataProvider="{cards}" width="150" color="0x000000" close="closeHandler(event);"/> <mx:VBox width="250" color="0x000000"> <mx:Text width="200" color="blue" text="Select a type of credit card."/> <mx:Label id="myLabel" text="You selected:"/> <mx:Label id="myData" text="Data:"/> </mx:VBox> </mx:Panel> </mx:Application>

以上用了个特殊技巧，通过event.target得到控件对象，其实你也可以通过控件的id来定位控件

下面举个略微复杂但常用的例子：二级联动

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#ffffff,#ffffff]"> <mx:Script> <!--[CDATA[ public function changeHandler(e:Event):void { city.dataProvider=e.target.selectedItem.item; city.selectedIndex=0; } ]]--> </mx:Script> <mx:XML id="xmlPC_linked" source="PC_linked.xml"/> <mx:Panel x="262" y="144" width="296" height="200"> <mx:ComboBox id="pro" dataProvider="{xmlPC_linked.node}" labelField="@label" change="changeHandler(event)"/> <mx:ComboBox id="city" labelField="@label"/> </mx:Panel> </mx:Application>

以下是数据集

<?xml version="1.0" encoding="utf-8"?> <root> <node label="北京市" type="0"> <item label="东城区"/> <item label="西城区"/> <item label="朝阳区"/> <item label="海淀区"/> </node> <node label="上海市" type="0"> <item label="黄浦区"/> <item label="卢湾区"/> </node> <node label="湖南省" type="0"> <item label="长沙"/> <item label="衡阳"/> </node> <node label="广东省" type="0"> <item label="广州市"/> <item label="深圳市"/> </node> </root>

最后讲数据的反绑，用第一个例子进行扩展，假设我们后台中存了2（American Express），当我们取出数据时要看到选中的是American Express而不是默认的第一选项。

<?xml version="1.0"?> <!-- Simple example to demonstrate the ComboBox control. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[0x000000,0x323232]" creationComplete="init();"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; [Bindable] public var cards:ArrayCollection = new ArrayCollection( [ {label:"Visa", data:1}, {label:"MasterCard", data:2}, {label:"American Express", data:3} ]); private function closeHandler(event:Event):void { myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.label; myData.text = "Data: " + ComboBox(event.target).selectedItem.data; } private function init():void{ var selectedIndex=-1; for(var i:int=0;i<cards.length;i++){ if(cards[i].data=2){//这里的2假设是从后台取出 selectedIndex=i } } test.selectedIndex=selectedIndex; } ]]--> </mx:Script> <mx:Panel title="ComboBox Control Example" height="75%" width="75%" layout="horizontal" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" color="0xffffff" borderAlpha="0.15"> <mx:ComboBox id="test" dataProvider="{cards}" width="150" color="0x000000" close="closeHandler(event);"/> <mx:VBox width="250" color="0x000000"> <mx:Text width="200" color="blue" text="Select a type of credit card."/> <mx:Label id="myLabel" text="You selected:"/> <mx:Label id="myData" text="Data:"/> </mx:VBox> </mx:Panel> </mx:Application> 

注意combobox如果为空默认selectedIndex 为-1，然后从0开始。