当按下回车键时,用作itemEditor的TextArea行为不正常

时间:2010-03-18 14:32:02

标签: flex

我在itemEditor组件中有一个TextArea,问题是当按下回车键时键入TextArea时,itemEditor会自行重置,而不是按照预期将插入符号移动到下一行:

    

  <mx:List width="100%" editable="true" >

    <mx:dataProvider>
      <mx:ArrayCollection>
        <mx:Array>
          <mx:Object title="Stairway to Heaven" />
        </mx:Array>
      </mx:ArrayCollection>
    </mx:dataProvider>

    <mx:itemRenderer>
      <mx:Component>
        <mx:Text height="100" text="{data.title}"/>
      </mx:Component>                       
    </mx:itemRenderer>

    <mx:itemEditor>
      <mx:Component>
        <mx:TextArea height="100" text="{data.title}"/>
      </mx:Component>                       
    </mx:itemEditor>

  </mx:List>

</mx:Application>

有人可以建议我如何解决这种奇怪的行为并使输入键的行为符合预期吗?

谢谢,

克里斯

3 个答案:

答案 0 :(得分:1)

诀窍是监听ITEM_EDIT_END事件,并在原因为NEW_ROW时阻止默认列表行为。见下面的例子:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="onComplete();">
    <mx:Script><![CDATA[
        import mx.events.ListEvent;
        import mx.events.ListEventReason;
        import mx.controls.TextArea;

        private function onComplete():void
        {
            list.addEventListener(ListEvent.ITEM_EDIT_END, onEndEdit);
        }
        private function onEndEdit(e:ListEvent):void
        {
            if (e.reason == ListEventReason.NEW_ROW)
                e.preventDefault();
            else
                list.editedItemRenderer.data.title = TextArea(e.currentTarget.itemEditorInstance).text;
        }
    ]]></mx:Script>
    <mx:List width="100%" editable="true" id="list">

        <mx:dataProvider>
            <mx:Object title="Stairway to Heaven" />
        </mx:dataProvider>

        <mx:itemRenderer>
            <mx:Component>
                <mx:Text height="100" text="{data.title}"/>
            </mx:Component>                       
        </mx:itemRenderer>

        <mx:itemEditor>
            <mx:Component>
                <mx:TextArea height="100" text="{data.title}"/>
            </mx:Component>                       
        </mx:itemEditor>

    </mx:List>

</mx:Application>

答案 1 :(得分:0)

看起来[enter]的按键由列表默认功能而不是您的项目渲染器处理。不确定要修复的确切代码是什么,但我认为你需要扩展列表控件,当用户按下[enter]时会修改该函数

答案 2 :(得分:0)

认为你可以使用List.as的“editorUsesEnterKey”(第544行Flex3.5)

一个标志,指示项目编辑器是否使用Enter键。