我的作品用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.
相关推荐
最新文章