Positioning icons in ComboBox for each element

In flex, you can add icons in addition to labels for the ComboBox elements (iconField option - check Display icons in ComboBox / Menu / Menubar for more information on this) but these icons by default will be added to the left of the label. So, you will see icon and the label as shown below.


But what if the requirement tells you to position the icon on the right of the label as shown below?


Then there is no choice, except to tweek the code and get the required functionality :-) Lets see how to do this in two steps.

Step 1: As a first step, you need to create your custom ComboBox itemrenderer that extends ListItemRenderer class and override updateDisplayList function of the ListItemRenderer class. ComboBox generally uses "ListItemRenderer" as the item renderer and you can create your own item renderer, say a class that extends Text class but here I am using ListItemRenderer because it contains icon field and you can set icon directly to the "iconField" and rest will be taken care by ListItemRenderer. But to position the icon to the right of the label, you need to set then "x" and "y" co-ordinates of the icon with respect to the width of the item. Additionally the label is moved a little left to adjust the width well. Thats it. All logic done.



package com.jusfortechies.controls
{
   import mx.controls.listClasses.ListItemRenderer;
	
   [Bindable]
   public class CustomComboBoxItemRenderer extends ListItemRenderer
   {
      override protected function updateDisplayList(unscaledWidth:Number,
                                             unscaledHeight:Number):void {
                                             
         super.updateDisplayList(unscaledWidth, unscaledHeight);
			
         //Adjust the position of the label by moving it slightly to left
         this.label.x -= 10;
			
         //Check if icon exist and set the position of icon by setting x and y co-ordinates
         if(this.icon){
            this.icon.x = unscaledWidth-14;
            this.icon.y = (unscaledHeight-10)/2;
         }
      }
   }
}


Step 2: This step is using the custom itemrenderer created above by setting it as itemRenderer to ComboBox. Now you can see the icon is positioned towards right.



<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
   xmlns:mx="http://www.adobe.com/2006/mxml" 
   layout="absolute" 
   >
	
   <mx:Script>
      <![CDATA[
         ...
         [Bindable]
         private var stateArrayColl:ArrayCollection = new ArrayCollection();
											
         [Bindable]
         [Embed(source="/assets/information.png")]
         public var Information:Class;

         public function onCreationComplete():void {
            iconComboBox.dropdown.iconField = "icon";
         }
			
         public function init():void {
            stateArrayColl.addItem(new ValueObject("AZ", "Arizona", "Information"));
            ...
         }
											
      ]]>
   </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.." creationComplete="onCreationComplete()"/>
				
   </mx:VBox>		
	
</mx:Application>



You can download the example source code here.

Download the example code.





blog comments powered by Disqus