Flex中如何利用getTextField事件和numLines属性，计算出TextArea控件中内容的行数的例子

关于Flex的 TextArea控件的例子，前面已经介绍了不少，包括设置该控件 文本无效时的颜色， 如何利用setSelection事件设定文本选中范围， 如何利用htmlText属性以及condenseWhite属性紧缩HTML空格……等等，可以直接点 TextArea Tag查看�CWordPress的Tag功能，其实是非常不错。

接下来的例子，演示了Flex中如何利用getTextField事件和numLines属性，计算出TextArea控件中内容的行数。

让我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）：

下面是完整代码(或 点击这里查看)：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:Script>
8.         <![CDATA[
9.             import mx.utils.StringUtil;
11.             private function textArea_change(evt:Event):void {
12.                 callLater(updateStats, [evt]);
13.             }
15.             private function updateStats(evt:Event):void {
16.                 var nLines:uint = textArea.mx_internal::getTextField().numLines;
17.                 var nChars:uint = textArea.length;
18.                 var str:String = "{0} characters; {1} lines";
19.                 panel.status = StringUtil.substitute(str,
20.                                     nChars,
21.                                     nLines);
22.             }
23.         ]]>
24.     </mx:Script>
26.     <mx:String id="str" source="lorem.txt" />
28.     <mx:ApplicationControlBar dock="true">
29.         <mx:Form styleName="plain">
30.             <mx:FormItem label="width (%):">
31.                 <mx:HSlider id="slider"
32.                         minimum="50"
33.                         maximum="100"
34.                         value="100"
35.                         liveDragging="true"
36.                         snapInterval="1"
37.                         tickInterval="10" />
38.             </mx:FormItem>
39.         </mx:Form>
40.     </mx:ApplicationControlBar>
42.     <mx:Panel id="panel"
43.             percentWidth="{slider.value}"
44.             height="100%">
45.         <mx:TextArea id="textArea"
46.                 htmlText="{str}"
47.                 condenseWhite="true"
48.                 width="100%"
49.                 height="100%"
50.                 change="textArea_change(event);"
51.                 resize="textArea_change(event);" />
52.     </mx:Panel>
54. </mx:Application>