我使用Flex 4.5,我喜欢创建自定义下拉列表.实际上,我想在我的下拉列表中的每一行显示一个标签和一个删除按钮.
目标是删除单击以删除按钮上的行.
这看起来很简单,但我没有找到如何做到这一点.
目标是删除单击以删除按钮上的行.
这看起来很简单,但我没有找到如何做到这一点.
谢谢你的帮助
解决方法
你必须为这一个跳过一些箍,因为DropDownList会阻止来自ItemRenderer内的对象的任何MouseEvent.CLICK被触发.
首先要做的事情是：您需要一个自定义事件才能实现此目的.一个带有你的物品或至少它的索引.例如.：
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).这就是我们需要自定义事件的原因,因为没有其他方法可以知道要删除的项目.