Setting a prompt on a ComboBox control in Flex

The following example shows how you can set a prompt on a Flex ComboBox control by setting the prompt property.

Full code after the jump.

You can reset a ComboBox control so that its prompt message is visible again by setting the selectedIndex property to -1.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/01/setting-a-prompt-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object abbrev="AL" name="Alabama" />
        <mx:Object abbrev="AK" name="Alaska" />
        <mx:Object abbrev="AZ" name="Arizona" />
        <mx:Object abbrev="AR" name="Arkansas" />
        <mx:Object abbrev="CA" name="California" />
        <mx:Object abbrev="CO" name="Colorado" />
        <mx:Object abbrev="CT" name="Connecticut" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="Reset ComboBox"
                click="comboBox.selectedIndex = -1;" />
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            labelField="name"
            prompt="Please select a state..." />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/01/setting-a-prompt-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.ComboBox;
            import mx.controls.Button;
            import mx.containers.ApplicationControlBar;

            private var arr:Array;
            private var appControlBar:ApplicationControlBar;
            private var button:Button;
            private var comboBox:ComboBox;

            private function init():void {
                arr = [];
                arr.push({abbrev:"AL", name:"Alabama"});
                arr.push({abbrev:"AK", name:"Alaska"});
                arr.push({abbrev:"AZ", name:"Arizona"});
                arr.push({abbrev:"AR", name:"Arkansas"});
                arr.push({abbrev:"CA", name:"California"});
                arr.push({abbrev:"CO", name:"Colorado"});
                arr.push({abbrev:"CT", name:"Connecticut"});

                button = new Button();
                button.label = "Reset ComboBox";
                button.addEventListener(MouseEvent.CLICK, button_click);

                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(button);
                Application.application.addChildAt(appControlBar, 0);

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.labelField = "name";
                comboBox.prompt = "Please select a state...";
                addChild(comboBox);
            }

            private function button_click(evt:MouseEvent):void {
                comboBox.selectedIndex = -1;
            }
        ]]>
    </mx:Script>

</mx:Application>

Tagged as: prompt, selectedIndex