Flex 3 Auto-Resize TextInput Control? How?

Here is a quick solution to add Auto-Size functionality to TextInput control in Flex 3.

AutoSizeTextInput.class

package com.tushar.controls {
	
	import flash.events.Event;	
	import mx.controls.TextInput;
	
	public class AutoSizeTextInput extends TextInput {
		
		private var txtSpan:uint = 10;
		
		public function AutoSizeTextInput() {
			super();
			this.addEventListener(Event.CHANGE, onTextChange);
		}
		
		private function onTextChange(evnt:Event):void {
			this.textField.scrollH = 0;
			this.width = this.autoSizeWidth;
		}
		
		override protected function commitProperties():void {
			super.commitProperties();
			this.textField.scrollH = 0;
			this.width = this.autoSizeWidth;
		}
		
		private function get autoSizeWidth():uint {
			return (this.textWidth+txtSpan);			
		}
	}
}

Usage in MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:custom="com.tushar.controls.*"
	layout="vertical">
	<custom:AutoSizeTextInput text="Hello world! "/>
</mx:Application>

Not sure if this method is perfect! Do let me know if there is any better way to implement this :)

About these ads

9 thoughts on “Flex 3 Auto-Resize TextInput Control? How?

  1. Better way:

    package components {

    import flash.events.Event;

    import mx.controls.TextInput;

    public class AutoSizeTextInput extends TextInput {

    private var txtSpan:uint = 10;

    public function AutoSizeTextInput() {
    super();
    this.addEventListener(Event.CHANGE, onTextChange);
    }

    private function onTextChange(evnt:Event):void {
    this.textField.scrollH = 0;
    this.width = this.autoSizeWidth;
    }

    override protected function commitProperties():void {
    super.commitProperties();
    this.textField.scrollH = 0;
    this.width = this.autoSizeWidth;
    this.validateNow();
    }

    private function get autoSizeWidth():uint {
    var retValue:uint = this.textWidth + txtSpan;

    if( this.minWidth > this.textWidth + txtSpan )
        retValue = this.minWidth;

      return retValue;  
    }
    }
    }

  2. Tushar & DIGITALUnderworld

    If I “Focus Into” or “Press Right Arrow” on the End of input Text, it scrolls.

    Josh

    doesn’t have that Problem, but width would fit for shorter Text (also at the beginning)

  3. 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();
    }
    }
    }

  4. And similar for TextArea:

    package components {
    import flash.events.Event;
    import flash.text.TextFieldAutoSize;

    import mx.controls.TextArea;

    public class AutoSizeTextInput extends TextArea {

    public function AutoSizeTextInput() {
    super();
    this.setStyle(“horizontalScrollPolicy”, “off”);
    this.setStyle(“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;
    }
    }
    }

  5. sorry, in textarea example above replace:

    this.setStyle(“horizontalScrollPolicy”, “off”);
    this.setStyle(“verticalScrollPolicy”, “off”);

    with this:

    horizontalScrollPolicy = “off”;
    verticalScrollPolicy = “off”;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s