добавить ItemRenderer на лету на компонент - PullRequest
Новая
       15

добавить ItemRenderer на лету на компонент

0 голосов
/ 21 июня 2011

У меня есть список, который имеет TextInput как itemRenderers для всех своих элементов. При запуске приложения элементы отображаются в TextInputs правильно. Данные заполняются из массива объектов.

Что я хочу, так это то, что после заполнения данных в ItemRenderers я хочу иметь дополнительное средство визуализации элементов (конечно, TextInput) ... так что, если пользователь хочет ввести другой элемент, он может поместить его в дополнительный текстовый вход.

И я также хочу добавлять дополнительный itemRenderer каждый раз, когда пользователь добавляет новый элемент и нажимает ENTER для вновь добавленного элемента.

Ниже мой itemRenderer, есть обработчик clearTxt_enterHandler ... но мне интересно, как добавить еще один itemRenderer после "Enter".

Может ли кто-нибудь направить меня с этим?

Thx 

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true" xmlns:components="components.*" width="100%">

    <s:layout> 
        <s:HorizontalLayout/> 
    </s:layout> 

    <fx:Script>http://stackoverflow.com/questions/4199373/flex-4-is-a-good-practice-store-the-loaded-bitmapdata-in-a-value-object-and-then
        <![CDATA[


            import mx.events.FlexEvent;

            import skins.ClearableTextInputSkin;

            override public function set data( value:Object ) : void {
                super.data = value;
                //clearTxt.text = value.label;
            }

            protected function clearTxt_enterHandler(event:FlexEvent):void
            {
                trace("On Enter");

            }

        ]]>
    </fx:Script>

    <components:ClearableTextInput text="{data.label}" id="clearTxt"
                                   skinClass="skins.ClearableTextInputSkin" enter="clearTxt_enterHandler(event)" left="10" top="36" width="220" />

</s:ItemRenderer>

И это мой список, который приходит из основного приложения: 

<s:List id="myList" itemRenderer="renderers.TextInputRenderer" dataProvider="{xxx}" width="100%">
        <s:layout>
            <s:TileLayout requestedRowCount="2"columnAlign="justifyUsingWidth"/>
        </s:layout>
    </s:List>

1 Ответ

0 голосов
/ 21 июня 2011

От ItemRenderer отправьте Событие, чтобы запросить нового ItemRenderer.Не забудьте сделать его пузырящимся, чтобы он доходил до списка, которому принадлежит ItemRenderer. 

protected function clearTxt_enterHandler(event:FlexEvent):void
{
    dispatchEvent(new Event("myCustomRequestEvent", true));
    //replace with a real custom Event; this is for brevity
}

Прослушайте это событие в компоненте List, а в обработчике просто добавьте новый элементего поставщик данных (возможно, с пустой меткой). 

myList.addEventListener("myCustomRequestEvent", addRow);

private function addRow(event:Event):void {
    myList.dataProvider.addItem({label: null});
    //replace anonymous object with your class
}

Это добавит новый элемент в список.В вашем случае вам может потребоваться привязать requestRowCount к количеству элементов в Списке, чтобы он увеличивался при добавлении элементов. 

<s:VerticalLayout requestedRowCount="{myList.dataprovider.length}" />

Кстати: почему вы используете TileLayout?Если вам нужно два поля ввода для элемента, вы должны поместить два TextInputs в один ItemRenderer и использовать VerticalLayout.Это сделает вашу жизнь намного проще.

...