欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flex自动调整大小的TextArea

程序员文章站 2022-06-14 16:09:34
...
AutoResizableTextArea类的定义:
<?xml version="1.0" encoding="utf-8"?>
<mx:TextArea xmlns:fx="http://ns.adobe.com/mxml/2009" 
			 xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:mx="library://ns.adobe.com/flex/mx" wordWrap="true">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
		
		// auto resize setting
		private var _autoResizable:Boolean = false;
		
		// getter
		[Bindable(event="changeAutoResize")]
		public function get autoResize():Boolean
		{
		return _autoResizable;
		}
					
		override public function drawFocus( isFocused:Boolean ):void
		{
			
		}
			
		// setter
		public function set autoResize(b:Boolean):void
		{
			_autoResizable = b;
			// if the text field component is created
			// and is auto resizable
			// we call the resize method
			if (this.mx_internal::getTextField() != null && 
			_autoResizable == true)
			resizeTextArea();
			// dispatch event to make the autoResize 
			// property bindable
			dispatchEvent(new Event("changeAutoResize"));
		}
		
		// setter override
		override public function set text(value:String):void
		{
			// calling super method 
			super.text = value;
			// if is auto resizable we call 
			// the resize method
			if (_autoResizable)
			resizeTextArea();
		}
		
		override public function set htmlText(value:String):void
		{
			super.htmlText = value;
			if (_autoResizable)
				resizeTextArea();
		}
			
		// resize function for the text area
		private function resizeTextArea():void
		{
			// initial height value
			// if set to 0 scroll bars will 
			// appear to the resized text area 
			var totalHeight:uint = 10;
			// validating the object
			this.validateNow();
			// find the total number of text lines 
			// in the text area
			var noOfLines:int = this.mx_internal::getTextField().numLines;
			// iterating through all lines of 
			// text in the text area
			for (var i:int = 0; i < noOfLines; i++) 
			{
				// getting the height of one text line
				var textLineHeight:int = 
				this.mx_internal::getTextField().getLineMetrics(i).height;
				// adding the height to the total height
				totalHeight += textLineHeight;
			}
			// setting the new calculated height
			this.height = totalHeight;
		}
		]]>
	</fx:Script>
</mx:TextArea>


注意事项,如果你是通过MXML的方式使用基本没有什么要注意的,如下方式使用:
<local:AutoResizableTextArea id="txtArea" autoResize="true" width="500"/>


但是如果是通过编程方式使用,那么就需要注意了,要保证设置宽度的代码位于加入容器的代码前面,即保证ta.width=500先于this.detailNavigatorContent.addElement(ta)被执行,
要保证设置Text或htmlText的代码位于添加到容器的代码的后面,即要保证this.detailNavigatorContent.addElement(ta)先于ta.htmlText=temp[size=medium][/size]被执行,这样AutoResizableTextArea才会正确工作。
					var	ta:AutoResizableTextArea=new AutoResizableTextArea();
						ta.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelChangeHandler);
						ta.editable=false;
						//ta.percentWidth=100;
						ta.width=500;
						ta.autoResize=true;
						this.detailNavigatorContent.addElement(ta);
						ta.htmlText=temp;
						ta.setStyle("borderStyle","none");
						ta.setStyle("borderAlpha","0");
						ta.verticalScrollPolicy=ContainerCreationPolicy.NONE;
						ta.addEventListener(FlexEvent.CREATION_COMPLETE,onTxtAreaCreationComplete);