Question

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

我想要的是，在ItemRenderers中填充数据之后，我想要一个额外的项目渲染器（当然是TextInput）...这样如果用户想要输入另一个项目，他可以将其放入附加的textInput。

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

下面是我的itemRenderer，有clearTxt_enterHandler处理程序..但我想知道如何在“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中，调度一个Event以请求新的ItemRenderer。一定要让它冒泡，以便它一直到拥有ItemRenderer的List。

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
}

这会在List中添加一个新项目。在您的情况下，您可能必须将requestRowCount绑定到List中的项目数，以便在添加项目时它会增长。

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

BTW：你为什么要使用TileLayout？如果你想要的是每个项目两个输入框，你应该在一个ItemRenderer中放置两个TextInputs并使用VerticalLayout。它会让你的生活更轻松。

在Component上即时添加ItemRenderer

1 个答案: