Adobe Flex – Combobox de múltipla de seleção

O combobox acima, quando você pressiona a tecla Ctrl, é possível selecionar mais que uma opção.

Para conseguir esse resultado é necessário extender o componente combobox criando um novo componente como mostra o código abaixo:

Arquivo ComboBoxs.as

package br.combobox
{
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.text.TextLineMetrics;
import mx.controls.ComboBox;
import mx.events.ListEvent;
 
	public class ComboBoxs  extends ComboBox
	{
		private var ctrlKey:Boolean = false;
		private const multiplaSelecao:String = 'Múltipla Seleção'
 
		override public function set initialized(value:Boolean):void
		{
			super.initialized = value;
			if(value)
            			resize();
		}
 
		override protected function keyDownHandler(event:KeyboardEvent):void
		{
			super.keyDownHandler(event);
 
			ctrlKey = event.ctrlKey;
 
			if(ctrlKey)
				dropdown.allowMultipleSelection = true;
		}
 
		override protected function keyUpHandler(event:KeyboardEvent):void
		{
			super.keyUpHandler(event);
			ctrlKey = event.ctrlKey;
			if(!ctrlKey) 
			{
				close(); 
				var changeEvent:ListEvent = new ListEvent(ListEvent.CHANGE)
				dispatchEvent(changeEvent);
			}
		}
 
		override public function close(trigger:Event=null):void
		{
			if(!ctrlKey)
			{
				super.close(trigger);
				if(dropdown.selectedItems.length > 1)
					textInput.text = multiplaSelecao;				
			}
		}
 
		private function resize():void
		{
			var lineMetrics:TextLineMetrics;			
 			lineMetrics = measureText(multiplaSelecao);
 			var newWidth:Number = lineMetrics.width;
 			newWidth += getStyle("arrowButtonWidth") + getStyle("paddingLeft") + getStyle("paddingRight") + 8;
		    this.width = Math.max(this.width, newWidth);
		}
 
		public function set selectedItems(value:Array):void
		{
			if(dropdown)
				dropdown.selectedItems = value;
		}
 
		[Bindable("change")]
		public function get selectedItems():Array
		{
			if(dropdown)
				return dropdown.selectedItems;
			else
				return null;
		}
 
		public function set selectedIndices(value:Array):void
		{
			if(dropdown)
				dropdown.selectedIndices = value;
		}
 
		[Bindable("change")]
		public function get selectedIndices():Array
		{
			if(dropdown)
				return dropdown.selectedIndices;
			else
				return null;
		}
	}
}

No arquivo MXML.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="br.combobox.*" height="128" width="276">
<mx:Script>
	<![CDATA[
 
		public function retornaSelecao(arTemp:Array,campo:String):String
		{
			var retorno:String = '';
			for(var i:int = 0; i<arTemp.length; i++)
			{	
				if(retorno != '')
					retorno += ',';
				retorno += arTemp[i][campo];
			}
			return retorno;	
		}	
 
 
	]]>
</mx:Script>
	<ns1:ComboBoxs y="10" id="cbMultiplo" labelField="label" prompt="Selecione" change="{lbSelecao.text = 'Valor selecionado: ' + retornaSelecao(cbMultiplo.selectedItems,'valor')}" horizontalCenter="0">
		<ns1:dataProvider>
			<mx:Array>
				<mx:Object label='Valor 1' valor='1'/>
				<mx:Object label='Valor 2' valor='2'/>
				<mx:Object label='Valor 3' valor='3'/>
				<mx:Object label='Valor 4' valor='4'/>
			</mx:Array>
		</ns1:dataProvider>
	</ns1:ComboBoxs>	
	<mx:Label y="40" id="lbSelecao" width="219" horizontalCenter="0" textAlign="center"/>
</mx:Application>