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.