Selecionando múltiplos itens sem o CTRL
Verdade seja dita: trabalhar com “itemRenderers” e “itemEditors” no Flex não é tão fácil quanto parece. Não é incomum as pessoas postarem dúvidas sobre este assunto nas listas de discussão pela Net a fora. É por isso que eu sempre recomendo fortemente a leitura do capitulo “Using Item Renderers and Item Editors” da documentação.
Uma alteração comum que as pessoas geralmente querem no funcionamento do List - e que pode ser resolvida com a ajuda de um “ItemRenderer”- consiste em permitir ao usuário selecionar múltiplos itens sem ter que pressionar o CTRL. Recentemente abriram uma thread na FlexDev sobre isso e eu fiz uma implementação que acho que ficou simples.
Na realidade, se o problema é apenas selecionar múltiplos itens sem o CTRL, o ItemRenderer nem é necessário. Ele simplesmente mostra ou não o ícone (check) nos itens que estão selecionados. Para isto eu simplesmente verifico se o item clicado está na lista de itens selecionados (list.selectedItens) da seguinte forma:
-
01. override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
-
02. {
-
03. super.updateDisplayList(unscaledWidth, unscaledHeight);
-
04.
-
05. label.setActualSize(unscaledWidth-checkIcon.width, unscaledHeight);
-
06.
-
07. var list:List = List(owner);
-
08. checkIcon.visible = new ArrayCollection(list.selectedItems).contains(data);
-
09. checkIcon.move(unscaledWidth-checkIcon.width, 0);
-
10. }
O interessante neste trecho de código se encontra na linha 8. Para não fazer um loop eu criei um “ArrayColletion” usando o “list.selectedItens” para poder usar o método “contains()”. Entende? Se eu não fizesse isto eu teria que fazer um loop para ver se o "data" se encontra na lista de elementos de "list.selectedItem".
A outra parte da solução consiste em estender o próprio “List” e enganá-lo dizendo que o CTRL está sempre pressionado. Isto é feito na linha 11 do trecho de código abaixo sobrescrevendo o handler “mouseDownHandler” e alterando a propriedade “event.ctrlKey”.
-
01. public class ListSelect extends List
-
02. {
-
03. public function ListSelect()
-
04. {
-
05. allowMultipleSelection = true;
-
06. itemRenderer = new ClassFactory(ListSelectItemRenderer);
-
07. }
-
08.
-
09. override protected function mouseDownHandler(event:MouseEvent):void
-
10. {
-
11. event.ctrlKey = true;
-
12. super.mouseDownHandler(event);
-
13. }
-
14. }
É isso! Uma solução simples que resolve o problema. Sempre que chego a uma solução simples eu gosto de blogar, pois eu não tenho muita paciência para explicar coisas complicadas. Além disso, programar é lidar com a complexidade e fazer fácil é sempre difícil.
2 comentários para “Selecionando múltiplos itens sem o CTRL”
Beck, simplesmente genial o event.ctrlKey = true;
Parabéns.
[...] é de hoje eu venho falando que trabalhar com itemRenderer/Editor não é fácil. Como você pode ver aqui, aqui e aqui existe uma [...]
Adicionar comentário
Beck, simplesmente genial o event.ctrlKey = true;
Parabéns.
[...] é de hoje eu venho falando que trabalhar com itemRenderer/Editor não é fácil. Como você pode ver aqui, aqui e aqui existe uma [...]
