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:选项显示的内容