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>
 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

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

  1. Klaus Busse says:

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

    Klaus

  2. peterd says:

    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. Mielno says:

    Thanks for all. I’ll try it and write something more later. Bye – Mielno

  4. Shahaji S.S. says:

    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

  5. peterd says:

    Shahaji S.S.,

    Yeah, I noticed this shortly after I posted the example. The solution is to disable keyboard navigation for the Flex ComboBox control. And as luck would have it, that was the subject of the very next blog post, “Disabling keyboard navigation on the ComboBox control in Flex”.

    Good catch!

    Peter

  6. meir says:

    Do you guys know how will it be possible to have a dropdown menu with checkbox next to each option in the dropdown?

  7. peterd says:

    meir,

    In order to do that, you’ll need to define an item renderer. For more information, and lots of examples, check out the item renderers section of Alex Harui’s blog at http://blogs.adobe.com/aharui/item_renderers/

    Peter

  8. meir says:

    Thanks so much,

    Meir

  9. Jovica Aleksic says:

    @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();
     
    		 }
    	}
    }
  10. Jovica Aleksic says:

    Ah, and of course you need to specify the downSkin for your combobox:

    <mx:ComboBox
    	downSkin="{DownSkin}" dataProvider="{myDataProvider}">
    </mx:ComboBox>
  11. Amit Tamse says:

    Hi Peter,
    How can we give border styling to the ComboBox as there is no property for border skin as in other components?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree