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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <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> |
Divirta-se!











Olá Igor, achei interessante esse post porém não conseguir executar o mesmo a minha nova aplicação diz que não consegue encontrar a classe ComboBoxs…
Acho que deve ser algum problema na questão das pastas ou na declaração dos pacotes, podes me informar qual a estrutura de pastas que preciso criar para funcionar esse exemplo ?!
Muito obrigado pela atenção.
Abraço.
@Caio, o arquivo ComboBoxs.as deve estar dentro da pasta src\br\combobox\ e no arquivo mxml, que utilizará o componente ComboBoxs deve ter a instrução xmlns:ns1=”br.combobox.*” dentro da tag Application na primeira linha.
Faça o teste e veja se resolveu o problema.
Abraços,
Igor Musardo
Esse cara é o cara em #flex >>> RT @IgorMusardo: Combobox de múltipla seleção em #Flex http://tinyurl.com/av93al
Muito bom cara!!!
Valeu o Marcos!