Создать выпадающий список с кнопкой удаления в этом элементе - PullRequest
Новая
       31

Создать выпадающий список с кнопкой удаления в этом элементе

1 голос
/ 19 января 2012

Я работаю с Flex 4.5 и мне нравится создавать собственный выпадающий список.Действительно, я хотел бы показать в каждой строке моего выпадающего списка ярлык и кнопку удаления.Цель состоит в том, чтобы удалить строку на кнопку, чтобы удалить кнопку.Это выглядит просто, но я не нашел, как это сделать.

Спасибо за помощь

1 Ответ

6 голосов
/ 19 января 2012

Вы должны перепрыгнуть через несколько обручей для этого, потому что DropDownList предотвращает запуск любого MouseEvent.CLICK из объекта внутри ItemRenderer.

Перво-наперво: вам понадобится пользовательское событие для этогоРабота.Тот, который несет ваш предмет или, по крайней мере, его индекс.Например: 

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 с кнопкой «delete», который будет отправлять это событие. 

<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 не срабатывает (как упоминалось ранее).Свойство owner ItemRenderer относится к списку, от которого он является дочерним.

Теперь последняя часть головоломки.Вот ваш 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, если ни один не был выбран).Вот почему нам понадобилось пользовательское событие, потому что не было другого способа узнать, какой элемент вы хотите удалить.

...