Flex4: How to Create Checked List ComboBox?

1.  ComboCheck.as

/*
* ComboCheck
* v1.2.6
* Arcadio Carballares Martín, 2009
* http://www.carballares.es/arcadio
*/
package com.arcadiocarballares {
        import flash.events.Event;
        import flash.events.MouseEvent;
        
        import mx.collections.ArrayCollection;
        import mx.controls.Alert;
        import mx.controls.ComboBox;
        import mx.controls.listClasses.ListBase;
        import mx.core.ClassFactory;
        import mx.events.CollectionEvent;
        import mx.events.FlexEvent;
        
        [Event(name="addItem", type="flash.events.Event")]
        [Event(name="itemsCreated", type="flash.events.Event")]
        [Event(name="selectAll", type="flash.events.Event")]
        [Event(name="deSelectAll", type="flash.events.Event")]
        
        public class ComboCheck extends ComboBox {
                public var itemAllValue:int=-1;
                private const ITEM_ALL_POSITION_DEFAULT:int=-1000;
                private var itemAllPosition:int=ITEM_ALL_POSITION_DEFAULT;
                
                private var _selectedItems:ArrayCollection;
                
                [Bindable("change")]
                [Bindable("valueCommit")]
                [Bindable("collectionChange")]
                public function set selectedItems(value:ArrayCollection):void {
                        _selectedItems=value;
                }
                
                public function get selectedItems():ArrayCollection {
                        return _selectedItems;
                }
                
                public function ComboCheck() {
                        super();
                        addEventListener("comboChecked", onComboChecked);
                        addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
                        addEventListener(Event.CLOSE, onDropDownInit);
                }
                
                private function onCreationComplete(event:Event):void {
                        dropdown.addEventListener(FlexEvent.CREATION_COMPLETE, onDropDownComplete);
                }
                
                override public function set dataProvider(value:Object):void {
                        super.dataProvider = value;
                        // Set selecAll position
                        for (var i:int;i<dataProvider.length;i++) {
                                if (dataProvider[i].value == itemAllValue) {
                                        itemAllPosition=i;
                                        break;
                                }
                        }
                }
                
                override protected function commitProperties():void {
                        super.commitProperties();
                        
                        var render:ClassFactory = new ClassFactory(ComboCheckItemRenderer);
                        super.itemRenderer=render;
                        var myDropDownFactory:ClassFactory = new ClassFactory(ComboCheckDropDownFactory);
                        super.dropdownFactory=myDropDownFactory;
                        
                        selectedItems=new ArrayCollection();
                        for each (var item:Object in dataProvider) {
                                var index:int=selectedItems.getItemIndex(item);
                                if (item.assigned==true) {
                                        if (index==-1) {
                                                selectedItems.addItem(item);
                                        }
                                } else {
                                        if (index!=-1) {
                                                selectedItems.removeItemAt(index);
                                        }
                                }
                        }
                        
                        setText()
                        
                        dispatchEvent(new Event("itemsCreated"));
                        trace ("commit properties!");
                }
                
                private function onDropDownInit(event:Event):void {
                        invalidateProperties();
                } 
                
                private function onDropDownComplete(event:Event):void {
                        trace ("dropdown complete!");
                } 
                
                private function onComboChecked(event:ComboCheckEvent):void {
                        var obj:Object=event.obj;
                        var index:int=selectedItems.getItemIndex(obj);
                        if (index==-1) {
                                selectedItems.addItem(obj);
                                if (obj.value == itemAllValue) {
                                        dispatchEvent(new Event("selectAll"));    
                                } else {
                                        if (selectedItems.length == dataProvider.length - 1) {
                                                selecCheckboxAll(true);
                                        }
                                }
                        } else {
                                selectedItems.removeItemAt(index);
                                if (obj.value == itemAllValue) {
                                        dispatchEvent(new Event("deSelectAll"));    
                                } else {
                                        selecCheckboxAll(false);
                                }
                        }
                        
                        setText();
                        
                        
                        dispatchEvent(new Event("valueCommit"));
                        dispatchEvent(new Event("addItem"));
                }
                
                private function setText():void {
                        if (selectedItems.length>1) {
                                textInput.text='multiple'
                        }
                        if (selectedItems.length==1) {
                                textInput.text=selectedItems.getItemAt(0)[labelField];
                        }
                        if (selectedItems.length<1) {
                                textInput.text='';
                        }
                }
                
                private function selecCheckboxAll(value:Boolean):void {
                        var item:ComboCheckItemRenderer;
                        if (itemAllPosition!=ITEM_ALL_POSITION_DEFAULT) {
                                item=ComboCheckItemRenderer(ListBase(dropdown).indexToItemRenderer(itemAllPosition));
                        
                                if (value) {
                                        item.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
                                } else {
                                        var index:int=selectedItems.getItemIndex(item.data);
                                        if (index!=-1) {
                                                selectedItems.removeItemAt(index);
                                        }
                                        item.selected = false;
                                        item.data.assigned = false;
                                }
                        }
                }
        }
}

 

2. ComboCheckDropDownFactory.as

package com.arcadiocarballares {
        import flash.events.Event;
        import flash.events.MouseEvent;
        
        import mx.controls.ComboBox;
        import mx.controls.List;
        import mx.controls.listClasses.*;
        
        public class ComboCheckDropDownFactory extends List {
                private var index:int=0;
                public function ComboCheckDropDownFactory(): void {
                        addEventListener("comboChecked", onComboChecked);
                }
                
                override protected function mouseOverHandler(event:MouseEvent):void {
                        event.preventDefault();
                        event.stopImmediatePropagation();
                }
                
                override protected function mouseEventToItemRenderer(event:MouseEvent):IListItemRenderer {
                        var row:IListItemRenderer = super.mouseEventToItemRenderer(event);
                        if (row!=null) {
                                index=itemRendererToIndex(row);
                        }
                        return null;
                }
                
                override protected function scrollHandler(event:Event):void {
                        super.scrollHandler(event);
                        refreshComboCheck();
                }
                
                override protected function scrollVertically(pos:int, deltaPos:int, scrollUp:Boolean):void {
                        super.scrollVertically(pos,deltaPos,scrollUp);
                        refreshComboCheck();
                }
                
                private function refreshComboCheck():void {
                        ComboBox(owner).invalidateProperties();
                }
                
                private function onComboChecked (event:ComboCheckEvent):void {
                        var myComboCheckEvent:ComboCheckEvent=new ComboCheckEvent(ComboCheckEvent.COMBO_CHECKED);
                        myComboCheckEvent.obj=ComboCheckEvent(event).obj;
                        owner.dispatchEvent(myComboCheckEvent);
                }
                
        }
}

 

3. ComboCheckEvent.as

package com.arcadiocarballares {
    
    import flash.events.Event;

    public class ComboCheckEvent extends Event {
        
                public static const COMBO_CHECKED:String = "comboChecked";
        public var obj:Object=new Object();
        
        public function ComboCheckEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false) {
            super(type, bubbles, cancelable);
        }
        
    }

}

 

4. ComboCheckItemRenderer

package com.arcadiocarballares {
        import flash.events.Event;
        import flash.events.MouseEvent;
        
        import mx.controls.Alert;
        import mx.controls.CheckBox;
        import mx.events.FlexEvent;
        
        public class ComboCheckItemRenderer extends CheckBox {
                
                public function ComboCheckItemRenderer() {
                        super();
                        addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
                        addEventListener(MouseEvent.CLICK,onClick);
                }

                override public function set data(value:Object):void {
                        if (value != null) {
                                super.data = value;
                                if (value.tooltip!=null) {
                                        toolTip = value.tooltip;
                                }
                        }
                }
                
                private function onCreationComplete(event:Event=null):void {
                        if (data!= null && data.assigned==true) {
                                selected=true;
                        }
                }
                
                private function onClick(event:MouseEvent):void {
                        data.assigned=selected;
                        var myComboCheckEvent:ComboCheckEvent=new ComboCheckEvent(ComboCheckEvent.COMBO_CHECKED);
                        myComboCheckEvent.obj=data;
                        owner.dispatchEvent(myComboCheckEvent);
                }
                
        }
}

 

5. Test.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   initialize="application1_initializeHandler(event)" xmlns:view="view.*">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			[Bindable]
			private var cobList:ArrayCollection = new ArrayCollection();
			
			
			protected function application1_initializeHandler(event:FlexEvent):void
			{
				cobList.addItem({label:"AAA", data:"AAA", assigned:true});
				cobList.addItem({label:"BBB", data:"BBB", assigned:true});
				cobList.addItem({label:"CCC", data:"CCC", assigned:true});
			}
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				var selectedItemList:ArrayCollection = comboCheck.selectedItems;
				for each (var o:Object in selectedItemList){
					Alert.show(o.label + " = " + o.data + ", assigned: " + o.assigned);
				}
			}
			
		]]>
	</fx:Script>
	<mx:VBox>
		<view:ComboCheck id="comboCheck" dataProvider="{cobList}" />
		<s:Button click="button1_clickHandler(event)" label="check"/>
	</mx:VBox>
</s:Application>

 

Declaration:

All rights reserved arcadiocarballares.com from Google

http://code.google.com/p/combocheck/source/browse/tags/combocheck-1.2/src/com/arcadiocarballares/?r=17