Search Flex Components Free

Custom Search

December 18, 2007

Programmatically opening and closing ComboBox controls in Flex 3 .0

The following examples show how you can programmatically open and close a ComboBox control’s drop down menu in Flex by using the open() and close() methods of the ComboBox class in Flex.
Full code after the jump.
The following example shows how you can open and close a ComboBox control’s drop down menu by rolling over a Button control on the display list.


<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white">
<mx:ApplicationControlBar dock="true"> <mx:Button label="open" rollOver="comboBox.open();" enabled="false" /> <mx:Button label="close" rollOver="comboBox.close();" enabled="false" /> </mx:ApplicationControlBar>
<mx:ComboBox id="comboBox" openDuration="2000" closeDuration="1000"> <mx:dataProvider> <mx:Array> <mx:Object label="one" /> <mx:Object label="two" /> <mx:Object label="three" /> <mx:Object label="four" /> <mx:Object label="five" /> <mx:Object label="six" /> </mx:Array> </mx:dataProvider> </mx:ComboBox>
</mx:Application>


The following example shows how you can open a ComboBox control’s drop down menu using ActionScript if the combo box fails validation (if it doesn’t have an item selected, for example):

<?xml version="1.0" encoding="utf-8"?&gt;<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white">
<mx:Script> <![CDATA[ import mx.events.ValidationResultEvent; import mx.controls.Alert;
private function numberValidator_invalid(evt:ValidationResultEvent):void { comboBox.errorString = "Please select a thing"; comboBox.open(); }
private function numberValidator_valid(evt:ValidationResultEvent):void { comboBox.errorString = ""; Alert.show("Success"); }
private function validateCheckBox():void { numberValidator.validate(comboBox.selectedIndex); } ]]> </mx:Script>
<mx:NumberValidator id="numberValidator" minValue="0" invalid="numberValidator_invalid(event);" valid="numberValidator_valid(event);" />
<mx:ApplicationControlBar dock="true"> <mx:Button label="validate" click="validateCheckBox();" /> <mx:Button label="reset" click="comboBox.selectedIndex = -1;" /> </mx:ApplicationControlBar>
<mx:ComboBox id="comboBox" prompt="Please select a thing..." openDuration="2000" closeDuration="1000" close="validateCheckBox();"> <mx:dataProvider> <mx:Array> <mx:Object label="one" /> <mx:Object label="two" /> <mx:Object label="three" /> <mx:Object label="four" /> <mx:Object label="five" /> <mx:Object label="six" /> </mx:Array> </mx:dataProvider> </mx:ComboBox>
</mx:Application>

Related Flex Tutorials