Flex中如何创建可以显示multi-line并且高度可变的DataGrid控件的例子

Flex中用得比较多的一个控件就是DataGrid，在创建一个需要排序的应用或者例子的时候，我总是会用一个DataGird来显示所有的调试信息以及其他自己需要的信息。下面就是一个简单的如何创建可以显示multi-line并且高度可变的DataGrid控件的例子。例子中说明了如何设置DataGrid控件，使其网格内的文字环绕，并且允许任何一行根据自身行内的文字内容高度是可变的。

让我们先来看一下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" backgroundColor="white" layout="vertical">  
4.     <mx:Array id="arr">
5.         <mx:Object articleName="Finding out a characters Unicode character code" data="15" />
6.         <mx:Object articleName="Setting an icon in an Alert control" data="14" />
7.         <mx:Object articleName="Setting an icon in a Button control" data="13" />
8.         <mx:Object articleName="Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data="10" />
9.         <mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />
10.         <mx:Object articleName="Using the Alert control" data="8" />
11.         <mx:Object articleName="Formatting data tips in a Slider" data="7" />
12.         <mx:Object articleName="Downloading the latest Adobe Labs version of Flex 3 SDK/Flex Builder 3 (codename: Moxie)" data="6" />
13.     </mx:Array>
14.     <mx:ArrayCollection id="arrColl" source="{arr}" />  
16.     <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" variableRowHeight="true" width="100%" height="100%">
17.         <mx:columns>
18.             <mx:DataGridColumn id="articleName" dataField="articleName" headerText="Name of the article in question" wordWrap="true" />
19.             <mx:DataGridColumn id="data" dataField="data" headerText="ID of the article" />
20.         </mx:columns>
21.     </mx:DataGrid>  
23. </mx:Application>