我的作品用Flex 4.5，我想创建一个自定义的DropDownList。事实上，我想在我的DropDownList的一个标签和一个删除按钮的每一行显示。 我们的目标是删除对点击行删除按钮。 这看起来像简单的，但我没有找到如何做到这一点。

I works with Flex 4.5 and I like to create a custom dropdownlist. Indeed, I'd like to show in each line on my dropdownlist a label and a delete button. The goal is to delete the line on click to delete button. This look like simple, but I don't found how to do that.

感谢您帮助

推荐答案

您必须通过几个铁圈跳了这一个，因为DropDownList的prevents任何 MouseEvent.CLICK 从内部的ItemRenderer的一个对象被解雇了。

You have to jump through a few hoops for this one because DropDownList prevents any MouseEvent.CLICK from an object inside an ItemRenderer from being fired.

首先：你需要一个自定义事件这个工作。一个承载您的项目，或至少它的索引。例如：

First things first: you will need a custom event for this to work. One that carries your item or at least its index. e.g.:

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, bubbles, cancelable);
    }

}

然后创建一个自定义的ItemRenderer与删除按钮，将分派此事件。

Then you create a custom ItemRenderer with a 'delete' Button that will dispatch this event.

<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>

这里重要的是，你赶上巴顿的MOUSE_DOWN事件，因为它的Click事件不会触发（如前所述）。的itemRenderer的所有者属性是指列表它是一个孩子。

Important here is that you catch the MOUSE_DOWN event of the Button, since its CLICK event doesn't fire (as mentioned before). The owner property of the ItemRenderer refers to the List it is a child of.

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

Now the last piece of the puzzle. Here's your DropDownList with custom ItemRenderer:

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

这就是你如何侦听自定义事件，并删除所选择的项目：

And here's how you listen for that custom event and remove the selected item:

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，而不是点击 myDropDownList.selectedIndex 属性仍然会在previously选择的项目（或-1，如果没有被选中）。这就是为什么我们需要自定义事件，因为当时的会心没有其他的办法是要删除的项目。

Because we caught the MOUSE_DOWN instead of CLICK the myDropDownList.selectedIndex property will still be at the previously selected item (or -1 if none was selected). This is why we needed the custom event, because there was no other way of knowing which is the item you want to remove.