Flex DropDownList with CheckBox 多选

效果图:

两个主要类:

CheckBoxItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                width="100%" autoDrawBackground="true">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <fx:Script>
        <![CDATA[

            protected function checkbox_changeHandler(event:Event):void
            {
                var chk:CheckBox = event.currentTarget as CheckBox;
                var ddl:DropDownListEx = this['outerDocument'] as DropDownListEx;
                
                if(chk.selected){
                    ddl.selectedItems.push(data);
                }else{
                    ddl.selectedItems.splice(ddl.selectedItems.indexOf(data), 1);
                }
                
                ddl.dispatchEvent(new Event("selectedItemsChange"));
            }
            
            override public function set data(value:Object):void{
                super.data = value;
                
                var ddl:DropDownListEx = this['outerDocument'] as DropDownListEx;
                chkbox.selected = ddl.selectedItems.indexOf(value) != -1;
            }
        ]]>
    </fx:Script>
    
    <s:HGroup width="100%">
        <s:Spacer width="5"/>
        <s:CheckBox id="chkbox" width="100%" label="{data.name}" change="checkbox_changeHandler(event)"/>
    </s:HGroup>
    
</s:ItemRenderer>

DropDownListEx.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:DropDownList xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                xmlns:comp="comp.*"
                creationComplete="dropdownlist_creationCompleteHandler(event)">
    <fx:Declarations>
        
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            
            import mx.events.FlexEvent;
            
            private var _selectedItems:Vector.<Object> = new Vector.<Object>();
            
            override public function set selectedItems(value:Vector.<Object>):void{
                this._selectedItems = value;
            }
            
            override public function get selectedItems():Vector.<Object>{
                return _selectedItems;
            }
            
            override public function get prompt():String{
                
                var s:String = "";
                
                selectedItems.sort(function compare(x:Object, y:Object):Number {
                    return -(Number(y['index']) - Number(x['index']));
                });
                
                for each(var item:Object in selectedItems){
                    s += (item['name']+",");
                }
                
                if(s.length > 0){
                    return s.substr(0, s.length - 1);
                }else{
                    return super.prompt;
                }
            }
            
            protected function dropdownlist_creationCompleteHandler(event:FlexEvent):void {
                this.addEventListener("selectedItemsChange", selectedItemsChangeHandler);
            }
            
            private function selectedItemsChangeHandler(evt:Event):void{
                this.labelDisplay.text = prompt;
            }
            
            override protected function item_mouseDownHandler(event:MouseEvent):void{
                
            }
            
        ]]>
    </fx:Script>
    
    <s:itemRenderer>
        <fx:Component>
            <comp:CheckBoxItemRenderer/>
        </fx:Component>
    </s:itemRenderer>
</s:DropDownList>

使用方法:

                <comp:DropDownListEx width="230">
                    <comp:dataProvider>
                        <s:ArrayCollection>
                            <fx:Object index="0" name="Sun"/>
                            <fx:Object index="1" name="Mon"/>
                            <fx:Object index="2" name="Tues"/>
                            <fx:Object index="3" name="Wed"/>
                            <fx:Object index="4" name="Thur"/>
                            <fx:Object index="5" name="Fri"/>
                            <fx:Object index="6" name="Sat"/>
                        </s:ArrayCollection>
                    </comp:dataProvider>
                </comp:DropDownListEx>

特别说明:

index:多选项目排序索引

name:选项显示的内容