Create dropdownlist with delete button in this itemrenderer - actionscript-3

Question

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.
Thanks for helping

Answer 1

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);
}
}
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>
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.
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);
}
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.