actionscript-3 – 在此itemrenderer中使用删除按钮创建下拉列表

首先要做的事情是：您需要一个自定义事件才能实现此目的.一个带有你的物品或至少它的索引.例如.：

public class ItemEvent extends Event {
    public static const REMOVE:String = "itemRemove";

    public var item:MyClass;

    public function ItemEvent(type:String,item:MyClass,bubbles:Boolean=false,cancelable:Boolean=false) {
        super(type,bubbles,cancelable);
        this.item = item;
    }

    override public function clone():Event {
        return new ItemEvent(type,item,cancelable);
    }

}

然后,您将创建一个带有“删除”按钮的自定义ItemRenderer,该按钮将调度此事件.

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[
            private function remove():void {
                owner.dispatchEvent(
                    new ItemEvent(ItemEvent.REMOVE,data as MyClass)
                );
            }
        ]]>
    </fx:Script>

    <s:Label id="labelDisplay" verticalCenter="0" left="10" />

    <s:Button verticalCenter="0" right="10" width="16" height="16"
              mouseDown="remove()" />

</s:ItemRenderer>

这里重要的是你捕获Button的MOUSE_DOWN事件,因为它的CLICK事件不会触发(如前所述). ItemRenderer的owner属性引用它所属的List.

现在是拼图的最后一块.这是你的DropDownList与自定义ItemRenderer：

<s:DropDownList id="myDropDownList" dataProvider="{dp}"
                itemRenderer="MyItemRenderer" />

以下是您如何监听该自定义事件并删除所选项目：

myDropDownList.addEventListener(ItemEvent.REMOVE,removeSelectedItem);

private function removeSelectedItem(event:ItemEvent):void {
    var items:IList = myDropDownList.dataProvider;
    var index:int = items.getItemIndex(event.item);
    items.removeItemAt(index);
}

因为我们捕获了MOUSE_DOWN而不是CLICK,所以myDropDownList.selectedIndex属性仍然是先前选择的项目(如果没有选择,则为-1).这就是我们需要自定义事件的原因,因为没有其他方法可以知道要删除的项目.