Setting style to ComboBox items

You must be already knowing that you can set the style of the ComboBox by setting its "styleName" property. Easy. But setting the style to ComboBox this way will set style to whole ComboBox, I mean, to all the elements in the ComboBox. If that is the requirement, then easy and job done. But if you want diffent style to be applied to different elements in the ComboBox, how will you do it? Check below. Here you can see one style applied to ComboBox and hence the prompt name "Select States..." is appearing in blue color but the ComboBox elements are in green and red colors because different style is applied to each ComboBox element.


This is a very simple solution. Lets see how to do this.

Step 1: First step is to create your custom item renderer. Check below - I am creating "CustomComboBoxItemRenderer"\ that extends "ListItemRenderer". It need not be "ListItemRenderer", you can extend "Text" class also. The main logic is in code "this.styleName = ValueObject(this.data).styleName;" of updateDisplayList(...) function. Here I am getting the styleName from the ComboBox item that is an item in the dataProvider and setting it as style of the element. Thats it.



package com.jusfortechies.controls
{
   import mx.controls.listClasses.ListItemRenderer;
	
   [Bindable]
   public class CustomComboBoxItemRenderer extends ListItemRenderer
   {
      override protected function updateDisplayList(unscaledWidth:Number,
                                                   unscaledHeight:Number):void {
                                             			
         //Get the style name from ComboBox element and set to the element
         this.styleName = ValueObject(this.data).styleName;
			
         super.updateDisplayList(unscaledWidth, unscaledHeight);
      }
   }
}


Step 2: Second step is just using the custom itemrenderer created above by setting it as itemRenderer to ComboBox. Now you can see different style applied to different elements in the ComboBox. If you check below piece of code, I am passing styleName for each element by setting the "styleName" property of the VO I created and used the same to set the style of the element. Very simple, isn't it?



<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
   xmlns:mx="http://www.adobe.com/2006/mxml" 
   layout="absolute" 
   >
	
   <mx:Style source="assets/main.css" />
	
   <mx:Script>
      <![CDATA[
         ...
         [Bindable]
         private var stateArrayColl:ArrayCollection = new ArrayCollection();
											
         public function init():void {
            //Code, Label and Style
            stateArrayColl.addItem(new ValueObject("AZ", "Arizona", "comboBoxOddItem"));
            ...
         }
											
      ]]>
   </mx:Script>
	
   <mx:VBox width="100%" horizontalAlign="center" verticalAlign="middle">
		 
      ...
		
      <mx:ComboBox id="iconComboBox" 
         dataProvider="{this.stateArrayColl}" initialize="init()" 
         itemRenderer="com.jusfortechies.controls.CustomComboBoxItemRenderer"
         labelField="label" prompt="Select States.." styleName="comboBox"/>
				
   </mx:VBox>		
	
</mx:Application>


Dont forget to set CSS file using "<mx:Style source="assets/main.css" />"


You can download the example source code here.

Download the example code.





blog comments powered by Disqus