Monday, December 14, 2009

Auto-Resizable TextInput and TextArea Flex Controls

Well, title says it all. Simple extension of TextInput and TextArea controls in Flex 3 to enable auto resize.

package components {
  import flash.events.Event;
  import flash.text.TextFieldAutoSize;
  import mx.controls.TextInput;
  public class AutoSizeTextInput extends TextInput {
    public function AutoSizeTextInput() {
      super();
      this.addEventListener(Event.CHANGE, function(event:Event) {
        invalidateSize();
      });
    }
    override protected function childrenCreated():void {
      this.textField.autoSize = TextFieldAutoSize.LEFT;
      super.childrenCreated();
    }
  }
}


package components {
  import flash.events.Event;
  import flash.text.TextFieldAutoSize;
  import mx.controls.TextArea;
  public class AutoSizeTextInput extends TextArea {
    public function AutoSizeTextInput() {
      super();
      horizontalScrollPolicy = "off";
      verticalScrollPolicy = "off";
      this.addEventListener(Event.CHANGE, function(event:Event) {
        invalidateSize();
      });
    }
    override protected function childrenCreated():void {
      this.textField.autoSize = TextFieldAutoSize.LEFT;
      this.textField.wordWrap = false;
      super.childrenCreated();
    }
    override protected function measure():void {
      super.measure();
      measuredWidth = textField.width;
      measuredHeight = textField.height;
    }
  }
}

1 comment:

Anonymous said...

package
{
import mx.controls.TextArea;
import flash.events.Event;
import flash.text.TextFieldAutoSize;

public class MyResizingTextArea extends TextArea
{
public function MyResizingTextArea()
{
super();
horizontalScrollPolicy = "off";
verticalScrollPolicy = "off";
this.addEventListener(Event.CHANGE, function(event:Event)
{
invalidateSize();
});
}

override protected function childrenCreated():void
{
this.textField.autoSize = TextFieldAutoSize.LEFT;
//this.textField.wordWrap = false;
super.childrenCreated();
}

override protected function measure():void
{
super.measure();
//measuredWidth = textField.width;
measuredHeight = textField.height;
}

}
}

This one works for me though. As my need is to fix the width only and let the height expand

Post a Comment