Spark TextArea or RichText autosize

I have done lots of searching on this subject, but it seems what I am finding is either out of date or just does not seem to work.

With TextFields in the past, you could set the TextField to a certain width, set wordWrap to true and you would end up with a textfield that changed height according to the text you added.

Now I am trying to do this with either the Spark TextArea or RichText.

I tried this HeightInLines = NAN, but that seems to be out of date.

I also tried this routine:

var totalHeight:uint = 10;开发者_JS百科
this.validateNow();
var noOfLines:int = this.mx_internal::getTextField().numLines;
for (var i:int = 0; i < noOfLines; i++) 
{
     var textLineHeight:int = 
                     this.mx_internal::getTextField().getLineMetrics(i).height;
     totalHeight += textLineHeight;
}
this.height = totalHeight;

But the mx_internal is not in the Spark components.

I am trying to do this with AS3, not MXML. If anyone has any suggestions or links that could help me figure this out using AS3, I'd really appreciate it.

Been struggling with this all afternoon. But it looks like the RichEditableText component will autosize if you set its width and leave its height undefined.

This works fine:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <s:TextArea updateComplete="event.currentTarget.heightInLines = NaN" />
</s:Application>

Found in comments here. You can do the same in ActionScript using the same updateComplete event.

This is how I set the height of a TextArea to fit its content when used inside an ItemRenderer (e.g. for a List component):

private function onUpdateComplete( e: Event ): void
{
    // autoresize the text area
    if ( theText ) {
      var actualNumOfLines: int = theText.textFlow.flowComposer.numLines;
      theText.heightInLines = actualNumOfLines; 

      invalidateSize();
    }
}

ItemRenderer must have this property set:

<s:ItemRenderer ... updateComplete="onUpdateComplete(event)>

Maybe the updateComplete event is not the optimal trigger for auto-resize actions but works fine for me.

You can remove scrollers from TextArea's skin and it becomes autoresizable. You can download completed skin here: http://www.yumasoft.com/node/126

Here's a solution for spark text areas (it works as mx text areas do):

var ta_height:int;
for(var i:int=0; i < StyleableTextField(myTextArea.textDisplay).numLines; i++) {
        ta_height += StyleableTextField(myTextArea.textDisplay).getLineMetrics(i).height;
}
myTextArea.height = ta_height;

This seems to work for me:

<s:TextArea id="testTextArea"
            change="testTextArea_changeHandler(event)" 
            updateComplete="testTextArea_updateCompleteHandler(event)"/>

<fx:Script>
    <![CDATA[
        protected function testTextArea_changeHandler(event:TextOperationEvent):void
        {
            testTextArea.height = RichEditableText(testTextArea.textDisplay).contentHeight + 2;
        }

        protected function testTextArea_updateCompleteHandler(event:FlexEvent):void
        {
            testTextArea.height = RichEditableText(testTextArea.textDisplay).contentHeight + 2;
        }
    ]]>
</fx:Script>

Been doing the same head banging over that s:TextArea, and then found out that this gets the job done :

<s:RichEditableText id="txtArea" left="0" right="0" backgroundColor="#F7F2F2"
                    change="textChanged()" />