Posted by: Tushar | November 20, 2008

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


Responses

  1. It was written for Flex 2, but it should still work. Here’s my Auto-Resizing TextInput control for Flex. It takes a different approach to the implementation.

  2. I tried this before but was not working for me in Flex 3!


Leave a response

Your response:

Categories