Programmatically opening and closing ComboBox controls in Flex

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.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/ -->
<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>

View source is enabled in the following example.

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):

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/ -->
<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>

View source is enabled in the following example.