add ItemRenderer on the fly on Component

Question

I have a List which has TextInput as itemRenderers for all its items. Upon application launch the items are rendered in the TextInputs correctly. The data is being populated from an Array of Objects.

What I want is, after the data has been populated in the ItemRenderers, I want to have an additional item renderer (TextInput of course)...so that if the user wants to enter another item, he can put it in the additional textInput.

And I also want to add the additional itemRenderer each time the user has added a new item and taps ENTER on the newly added item.

Below is my itemRenderer, there is the clearTxt_enterHandler handler..but I wonder how to add another itemRenderer upon "Enter".

Can somebody guide me with this?

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>

And this is my list that comes from the main application:

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

You'll probably want to extend the list class and/or create a custom skin add your extra row for adding new data. There is no easy way to do this. — JeffryHouser

RIAstar RIAstar · Accepted Answer · 2011-06-21T16:04:08

From the ItemRenderer, dispatch an Event to request the new ItemRenderer. Be sure to make it bubbling, so that it goes all the way up to the List that owns the ItemRenderer.

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

Listen for that event on the List component and in the handler just add a new element to its dataprovider (probably with an empty label).

myList.addEventListener("myCustomRequestEvent", addRow);

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

This will add a new item to the List. In your case you may have to bind requestRowCount to the number of items in the List, so that it will grow when you add the items.

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

BTW: why are you using TileLayout? If what you want is two input boxes per item, you should put two TextInputs in one ItemRenderer and use VerticalLayout. It will make your life a lot easier.

add ItemRenderer on the fly on Component

1 Answers