Basic Flex control-ComboBox

ComboBox is very useful in flex. The only difficulty is the data unbinding of combobox.

Let me start with a simple example. The following is the simplest example of using flex tour. I am familiar with the attributes of this control.

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

You can use event.tar to get the control object. In fact, you can also use the control id to locate the control.

The following is a complex but common example: second-level linkage

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

The following is a dataset

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <root> <br/> <node label = "Beijing" type = "0"> <br/> <item label = "Dongcheng District"/> <br/> <item label = "Xicheng district"/> <br/> <item label = "Chaoyang District"/> <br/> <item label = "Haidian District"/> <br/> </node> <br/> <node label = "Shanghai" type = "0"> <br/> <item label = "Huangpu District"/> <br/> <item label = "Luwan District"/> <br/> </node> <br/> <node label = "Hunan Province" type = "0"> <br/> <item label = "Changsha"/> <br/> <item label = "Hengyang"/> <br/> </node> <br/> <node label = "Guangdong Province" type =" 0 "> <br/> <item label =" Guangzhou City "/> <br/> <item label =" Shenzhen City "/> <br/> </node> <br/> </root>

Finally, we will talk about the data unbinding and use the first example for expansion. Suppose we have 2 (American Express) in the background ), when we retrieve the data, we need to see that the selected American Express is not the default first option.

<? Xml version = "1.0"?> <Br/> <! -- Simple example to demonstrate the ComboBox control. --> <br/> <mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml" backgroundGradientColors = "[0x323232]" <br/> creationComplete = "init (); "> </p> <mx: Script> <br/> <! -- [CDATA [<br/> import mx. collections. arrayCollection; </p> <p> [Bindable] <br/> public var cards: ArrayCollection = new ArrayCollection (<br/> [{label: "Visa", data: 1 },< br/> {label: "MasterCard", data: 2 },< br/> {label: "American Express", data: 3}]); </p> <p> private function closeHandler (event: Event): void {<br/> myLabel. text = "You selected:" + ComboBox(event.tar get ). selectedItem. label; <br/> myData. text = "Data:" + ComboBox(event.tar get ). selectedItem. data; <br/>}</p> <p> private function init (): void {<br/> var selectedIndex =-1; <br/> for (var I: int = 0; I <cards. length; I ++) {<br/> if (cards [I]. data = 2) {// here 2 is assumed to be retrieved from the background <br/> selectedIndex = I <br/>}< br/> test. selectedIndex = selectedIndex; <br/>}< br/>] --> <br/> </mx: Script> </p> <mx: panel title = "ComboBox Control Example" <br/> height = "75%" width = "75%" layout = "horizontal" <br/> paddingTop = "10" paddingBottom = "10 "paddingLeft =" 10 "paddingRight =" 10 "<br/> color =" 0 xffffff "borderAlpha =" 0.15 "> </p> <mx: comboBox id = "test" dataProvider = "{cards}" width = "150" color = "0x000000" <br/> close = "closeHandler (event ); "/> </p> <mx: VBox width =" 250 "color =" 0x000000 "> <br/> <mx: text width = "200" color = "blue" text = "Select a type of credit card. "/> <br/> <mx: Label id =" myLabel "text =" You selected: "/> <br/> <mx: label id = "myData" text = "Data:"/> <br/> </mx: VBox> </p> </mx: panel> <br/> </mx: Application> 

Note: If the value of combobox is null, the default value of selectedIndex is-1, and then starts from 0.