Setting a selection disabled color on a ComboBox control’s dropdown menu in Flex

The following example shows how you can set a background color for a selected item in a disabled Flex ComboBox control by setting the selectionDisabledColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/15/setting-a-selection-disabled-color-on-a-combobox-controls-dropdown-menu-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.DropdownEvent;

            private function comboBox_open(evt:DropdownEvent):void {
                comboBox.dropdown.enabled = checkBox.selected;
                comboBox.dropdown.setStyle("selectionDisabledColor", colorPicker.selectedColor);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <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:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
            <mx:FormItem label="selectionDisabledColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            open="comboBox_open(event);" />

</mx:Application>

View source is enabled in the following example.

You can also set the selectionDisabledColor style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/15/setting-a-selection-disabled-color-on-a-combobox-controls-dropdown-menu-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.DropdownEvent;

            private function comboBox_open(evt:DropdownEvent):void {
                comboBox.dropdown.enabled = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:Style>
        ComboBox {
            dropdownStyleName: myComboBoxDropdownStyleName;
        }

        .myComboBoxDropdownStyleName {
            selectionDisabledColor: red;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Array id="arr">
        <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:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            open="comboBox_open(event);" />

</mx:Application>

11 thoughts on “Setting a selection disabled color on a ComboBox control’s dropdown menu in Flex

  1. Cool… is there a way to prevent the short white flash when opening the dropdown?

    Klaus

  2. Klaus Busse,

    One workaround is to set the ComboBox control’s openDuration style to 0 so that the ComboBox opens immediately instead of animating down.

    Peter

  3. Dear All,
    If you see carefully, there is one bug in this,
    Put your finger on downarrow, click on combobox and immidiately press downarrow, you are able to change the combo value after checkbox state is disabled.

    what will be the solution????
    shahazee

  4. @Klaus Busse’s question:
    Even a openDuration of 0 will cause the short bright flicker.The key to this is using a custom downSkin.
    In my case it was fine to extend UIComponent for that, maybe it would be more correct to use ProgrammaticSkin, however this solution worked fine for me:

    package  
    { 
    	import mx.core.UIComponent;
     
     
    	public class DownSkin extends UIComponent
    	{
    		public function DownSkin()
    		{
    			super();
    		}
     
    		private var downBgColor:Number = 0x222222;
     
    		protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
    		{
    		   super.updateDisplayList(unscaledWidth, unscaledHeight);			
     
    			var backgroundFillColor:Number;	
    			var cornerRadius:Number = getStyle("cornerRadius");
    			var backgroundAlpha:Number = getStyle("backgroundAlpha");
     
    			graphics.clear();
     
    			switch (name) { 
    				case "downSkin":
    					backgroundFillColor = this.downBgColor;
    					break; 
    			}
     
    			graphics.beginFill(backgroundFillColor);
    			drawRoundRect(0,0,unscaledWidth,unscaledHeight,{tl: cornerRadius, tr: cornerRadius, bl: cornerRadius, br: cornerRadius},
    			 				backgroundFillColor,backgroundAlpha);
    			graphics.endFill();
     
    		 }
    	}
    }
  5. Ah, and of course you need to specify the downSkin for your combobox:

    <mx:ComboBox
    	downSkin="{DownSkin}" dataProvider="{myDataProvider}">
    </mx:ComboBox>
  6. Hi Peter,
    How can we give border styling to the ComboBox as there is no property for border skin as in other components?

Comments are closed.