在此 itemrenderer 中使用删除按钮创建下拉列表 [英] Create dropdownlist with delete button in this itemrenderer

问题描述

我使用 Flex 4.5，我喜欢创建自定义下拉列表.事实上，我想在下拉列表的每一行中显示一个标签和一个删除按钮.目标是在单击删除按钮时删除该行.这看起来很简单，但我不知道如何去做.

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 会阻止来自 ItemRenderer 内的对象的任何 MouseEvent.CLICK被解雇了.

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>

这里重要的是您要捕获 Button 的 MOUSE_DOWN 事件，因为它的 CLICK 事件不会触发(如前所述).ItemRenderer 的 owner 属性指的是它是其子级的 List.

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.

现在是拼图的最后一块.这是带有自定义 ItemRenderer 的 DropDownList:

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 而不是 CLICK，所以 myDropDownList.selectedIndex 属性仍将位于先前选择的项目(如果没有选择，则为 -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.

这篇关于在此 itemrenderer 中使用删除按钮创建下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！