当前位置:首页 > 开发 > Web前端 > Ext > 正文

Flex自动调整大小的TextArea

发表于: 2012-10-04   作者:darrenzhu   来源:转载   浏览:
摘要: AutoResizableTextArea类的定义: <?xml version="1.0" encoding="utf-8"?> <mx:TextArea xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.ad
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);

Flex自动调整大小的TextArea

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号