动态添加ItemRenderer组件

Question

我有一个列表，它的所有项目都有TextInput作为itemRenderers。在应用程序启动时，项目会正确地呈现在TextInputs中。数据是从对象数组中填充的。

我想要的是，在ItemRenderers中填充数据之后，我希望有一个额外的项目呈现器(当然是textInput )...so，如果用户想要输入另一个项目，他可以将其放在额外的textInput中。

我还想在每次用户添加新项并在新添加的项上点击ENTER时添加额外的itemRenderer。

下面是我的itemRenderer，还有clearTxt_enterHandler handler..but，我想知道如何在"Enter“时添加另一个itemRenderer。

有人能指导我做这个吗？

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>

Answer 1

在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组件上侦听该事件，在处理程序中只需向其dataprovider添加一个新元素(可能标签为空)。

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？如果您想要的是每个项目有两个输入框，那么您应该在一个ItemRenderer中放置两个TextInputs并使用VerticalLayout。它会让你的生活变得轻松许多。