Spark TextArea o RichText autosize

Question

He hecho muchas búsquedas sobre este tema, pero parece que lo que estoy buscando está desactualizado o simplemente no parece funcionar.

Con campos de texto en el pasado, podría configurar el campo de texto a una cierta anchura, establezca wordWrap true y que terminaría con un campo de texto que cambió altura de acuerdo con el texto que ha añadido.

Ahora estoy tratando de hacer esto con Spark TextArea o RichText.

Intenté esto HeightInLines = NAN, pero eso parece estar desactualizado.

También probé esta rutina:

var totalHeight:uint = 10; 
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; 

Pero el mx_internal no se encuentra en los componentes Spark.

Estoy tratando de hacer esto con AS3, no con MXML. Si alguien tiene sugerencias o enlaces que me podrían ayudar a resolver esto usando AS3, realmente lo agradecería.

Answer 1

Esto funciona bien:

<?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> 

encontrados en los comentarios here. Puede hacer lo mismo en ActionScript utilizando el mismo evento updateComplete.

Answer 2

He estado luchando con esto toda la tarde. Pero parece que el componente RichEditableText se auto-dimensionará si establece su ancho y deja su altura indefinida.

Answer 3

estado haciendo lo mismo golpearse la cabeza sobre que s: TextArea, y luego descubrió que este hace el trabajo:

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

Answer 4

Así es como me puse la altura de un TextArea para adaptarse a su contenido cuando se usa dentro de un itemRenderer (por ejemplo, para un componente List):

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

     invalidateSize(); 
    } 
} 

itemRenderer debe tener este conjunto de propiedades:

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

Quizás el evento updateComplete no sea el disparador óptimo para las acciones de cambio de tamaño automático, pero funciona bien para mí.

Answer 5

Puede eliminar los scrollers de la máscara de TextArea y se puede volver a editar. la piel se puede Descarga completa aquí: http://www.yumasoft.com/node/126

Answer 6

Aquí hay una solución para áreas de texto chispa (funciona áreas de texto como mx hacer):

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; 

Answer 7

Esto parece funcionar para mí:

<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>