Flex自动调整大小的TextArea
程序员文章站
2022-06-14 16:09:34
...
AutoResizableTextArea类的定义:
注意事项,如果你是通过MXML的方式使用基本没有什么要注意的,如下方式使用:
但是如果是通过编程方式使用,那么就需要注意了,要保证设置宽度的代码位于加入容器的代码前面,即保证ta.width=500先于this.detailNavigatorContent.addElement(ta)被执行,
要保证设置Text或htmlText的代码位于添加到容器的代码的后面,即要保证this.detailNavigatorContent.addElement(ta)先于ta.htmlText=temp[size=medium][/size]被执行,这样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);