flex数据绑定

 数据绑定

在呈现单个数据的时候，可以使用文本控件。那么在呈现多条数据的时候，如何表现出来呢？在Flex中就已经提供了呈现多条数据的各种数据绑定控件，使用这些控件，就可以设计出各种样式的数据列表。：
数据列表List
横向数据列表HorizontalList
交叉数据列表TileList
下拉列表ComBox
数据网格DataGrid
树列表Tree

一、数据列表
在呈现一个一维数据集合的时候，使用数据列表是最直观方便的。默认情况下，数据列表是一列多行的形式，即纵向的呈现数据。

1.1 使用List控件创建数据列表
在Flex中，已经提供了一个数据列表List控件。将数据列表List控件与相关的数据集绑定，便可以在数据列表中呈现需要的数据。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.     <mx:List x="62" y="34" width="73" height="157" fontSize="14">  
4.         <mx:dataProvider>  
5.             <mx:String>北京</mx:String>  
6.             <mx:String>上海</mx:String>  
7.             <mx:String>广州</mx:String>  
8.             <mx:String>深圳</mx:String>  
9.             <mx:String>重庆</mx:String>  
10.             <mx:String>沈阳</mx:String>  
11.         </mx:dataProvider>  
12.     </mx:List>  
13. </mx:Application>  

1.2 使用ActionScript在List控件中绑定数据
除了在List控件的内部直接填充数据外，还可以使用ActionScript脚本语言在外部定义数据。通过使用ActionScript语言定义的数据集与控件List绑定，也可以呈现出来，并且比之前在内部定义的方法更灵活和有效。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  
3.     creationComplete="InitApp()">  
4.     <mx:Script>  
5.         <![CDATA[ 
6.             import mx.collections.ArrayCollection; 
7.              
8.             /** 
9.              * 初始化,绑定数据到列表中 
10.              * */ 
11.             private function InitApp():void 
12.             { 
13.                 // 定义对象 
14.                 var city:Object; 
15.                 // 定义集合 
16.                 var citys:ArrayCollection = new ArrayCollection(); 
17.                  
18.                 // 添加数据 
19.                 city = new Object(); 
20.                 city.label = "北京"; 
21.                 city.data = "55%"; 
22.                 citys.addItem(city); 
23.                  
24.                 // 添加数据 
25.                 city = new Object(); 
26.                 city.label = "广州"; 
27.                 city.data = "30%"; 
28.                 citys.addItem(city); 
29.                  
30.                 // 添加数据 
31.                 city = new Object(); 
32.                 city.label = "深圳"; 
33.                 city.data = "60%"; 
34.                 citys.addItem(city); 
35.                  
36.                 // 添加数据 
37.                 city = new Object(); 
38.                 city.label = "沈阳"; 
39.                 city.data = "50%"; 
40.                 citys.addItem(city); 
41.                  
42.                 // 绑定 
43.                 listCity.dataProvider = citys; 
44.             } 
45.              
46.             /** 
47.              * 设置显示内容 
48.              * */ 
49.             private function listCity_labelFunction(item:Object):String 
50.             { 
51.                 return item.label + "，" + item.data; 
52.             } 
53.         ]]>  
54.     </mx:Script>  
55.     <mx:List id="listCity" labelFunction="listCity_labelFunction" x="62" y="34"   
56.         width="93" height="137" fontSize="14">  
57.     </mx:List>  
58. </mx:Application>  

labelFunction(value:Function):void用户提供的函数，在每个项目上运行以确定其标签。默认情况下，列表将在每个数据提供程序项目上查找label 属性并将其显示出来。但是，一些数据集不包含label 属性，也不包含可用于显示的其它属性。例如，数据集中包含 lastName 和 firstName 字段，但您希望显示全名。 您可以提供一个labelFunction，用于查找合适的字段并返回可显示的字符串。
1.3 获取List控件的数据
能够获取到List控件中项的数据，是与用户交互的直接手段。获取List控件中已选择的数据项通常使用selectedItem方法。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  
3.     creationComplete="InitApp()">  
4.     <mx:Script>  
5.         <![CDATA[ 
6.             import mx.collections.ArrayCollection; 
7.              
8.             /** 
9.              * 初始化,绑定数据到列表中 
10.              * */ 
11.             private function InitApp():void 
12.             { 
13.                 // 定义对象 
14.                 var city:Object; 
15.                 // 定义集合 
16.                 var citys:ArrayCollection = new ArrayCollection(); 
17.                  
18.                 // 添加数据 
19.                 city = new Object(); 
20.                 city.label = "北京"; 
21.                 city.data = "55%"; 
22.                 citys.addItem(city); 
23.                  
24.                 // 添加数据 
25.                 city = new Object(); 
26.                 city.label = "广州"; 
27.                 city.data = "30%"; 
28.                 citys.addItem(city); 
29.                  
30.                 // 添加数据 
31.                 city = new Object(); 
32.                 city.label = "深圳"; 
33.                 city.data = "60%"; 
34.                 citys.addItem(city); 
35.                  
36.                 // 添加数据 
37.                 city = new Object(); 
38.                 city.label = "沈阳"; 
39.                 city.data = "50%"; 
40.                 citys.addItem(city); 
41.                  
42.                 // 绑定 
43.                 listCity.dataProvider = citys; 
44.             } 
45.              
46.             /** 
47.              * 单击选择事件 
48.              * */ 
49.             private function listCity_click():void 
50.             { 
51.                 lbSelectItem.text = "您选择的是：" + listCity.selectedItem.label +  
52.                                     "(" + listCity.selectedItem.data + ")"; 
53.             } 
54.         ]]>  
55.     </mx:Script>  
56.     <mx:List id="listCity" labelField="label" click="listCity_click()"  
57.         x="43" y="29" width="93" height="137" fontSize="14">  
58.     </mx:List>  
59.     <mx:Label id="lbSelectItem" x="10" y="189" text="" fontSize="14" width="183" color="#FFFFFF"/>  
60. </mx:Application>  

1.4 在数据中嵌入图片
除了在数据列表List控件中填充数据外，还可以在数据中嵌入图片资源。嵌入资源后的数据列表List控件，表现会更加丰富。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  
3.     creationComplete="InitApp()">  
4.     <mx:Script>  
5.         <![CDATA[ 
6.             // 定义手机图标，并嵌入到程序中 
7.             [Embed(source="assets/mobileIcon.jpg")] 
8.             private var mobileSymbol:Class; 
9.  
10.             /** 
11.              * 初始化，绑定数据 
12.              * */ 
13.             private function InitApp():void 
14.             { 
15.                 // 定义数组 
16.                 var mobileArr:Array =  
17.                 [ 
18.                     {mobileIcon:mobileSymbol, mobile:"摩托罗拉", ballot:"12.9%"}, 
19.                     {mobileIcon:mobileSymbol, mobile:"诺基亚", ballot:"32.26%"}, 
20.                     {mobileIcon:mobileSymbol, mobile:"索尼爱立信", ballot:"6.45%"}, 
21.                     {mobileIcon:mobileSymbol, mobile:"三星", ballot:"12.9%"}, 
22.                     {mobileIcon:mobileSymbol, mobile:"波导", ballot:"3.23%"} 
23.                 ] 
24.                  
25.                 // 绑定数据 
26.                 listMobile.dataProvider = mobileArr; 
27.             } 
28.         ]]>  
29.     </mx:Script>  
30.     <mx:List id="listMobile" labelField="mobile" iconField="mobileIcon" x="40" y="30" width="125" fontSize="14" />  
31. </mx:Application>  

二、 横向数据列表
多条数据除了以纵向的方式呈现外，还可以用横向的方式呈现。

2.1 使用HorizontalList控件
在Flex中，提供了一个横向列表的控件HorizontalList，使用HorizontalList可以设计一个横向列表的多条数据呈现。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.     <mx:Array id="arr">  
4.         <mx:Object label="Flex"  
5.                 thumbnailImage="assets/fx_appicon-tn.gif"  
6.                 fullImage="assets/fx_appicon.jpg" />  
7.         <mx:Object label="Flash"  
8.                 thumbnailImage="assets/fl_appicon-tn.gif"  
9.                 fullImage="assets/fl_appicon.jpg" />  
10.         <mx:Object label="Illustrator"  
11.                 thumbnailImage="assets/ai_appicon-tn.gif"  
12.                 fullImage="assets/ai_appicon.jpg" />  
13.         <mx:Object label="Dreamweaver"  
14.                 thumbnailImage="assets/dw_appicon-tn.gif"  
15.                 fullImage="assets/dw_appicon.jpg" />  
16.         <mx:Object label="ColdFusion"  
17.                 thumbnailImage="assets/cf_appicon-tn.gif"  
18.                 fullImage="assets/cf_appicon.jpg" />  
19.         <mx:Object label="Flash Player"  
20.                 thumbnailImage="assets/fl_player_appicon-tn.gif"  
21.                 fullImage="assets/fl_player_appicon.jpg" />  
22.         <mx:Object label="Fireworks"  
23.                 thumbnailImage="assets/fw_appicon-tn.gif"  
24.                 fullImage="assets/fw_appicon.jpg" />  
25.         <mx:Object label="Lightroom"  
26.                 thumbnailImage="assets/lr_appicon-tn.gif"  
27.                 fullImage="assets/lr_appicon.jpg" />  
28.         <mx:Object label="Photoshop"  
29.                 thumbnailImage="assets/ps_appicon-tn.gif"  
30.                 fullImage="assets/ps_appicon.jpg" />  
31.     </mx:Array>  
32.       
33.     <mx:HorizontalList id="horizontalList"  
34.                     labelField="label"  
35.                     iconField="thumbnailImage"  
36.                     dataProvider="{arr}"  
37.                     itemRenderer="CustomItemRenderer"  
38.                     columnCount="4"  
39.                     columnWidth="125"  
40.                     rowCount="1"  
41.                     rowHeight="100"  
42.                     horizontalScrollPolicy="on" />  
43. </mx:Application>  

2 自定义ItemRenderer属性
在上一节中，通过ItemRenderer属性定义了子数据项的类型Image。除了可以定义一个系统集成的数据类型外，还可以自定义一个ItemRenderer属性的值。

3 二维数据列表
除了纵向或横向的呈现数据外，还可以自定义的以二维的形式呈现数据。这种方式更加灵活，开发者可以根据实际情况，设置行数和列数。本节将会详细讲述如何设计一个二维数据列表。

3.1 使用TileList控件
在Flex中，已经提供了可以设计二维数据列表的控件TileList。通过设置此控件的相关属性，就可以定制列数和行数。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.   
4.     <mx:Script>  
5.         <![CDATA[ 
6.              
7.             [Bindable] 
8.             [Embed(source="assets/dc_canon_ixus_80.jpg")] 
9.             public var phone1:Class; 
10.               
11.             [Bindable] 
12.             [Embed(source="assets/dc_fuji_s1000fd.jpg")] 
13.             public var phone2:Class; 
14.               
15.             [Bindable] 
16.             [Embed(source="assets/dc_nikon_D90.jpg")] 
17.             public var phone3:Class; 
18.               
19.             [Bindable] 
20.             [Embed(source="assets/dc_panasonic_lx3gk.jpg")] 
21.             public var phone4:Class; 
22.              
23.             [Bindable] 
24.             [Embed(source="assets/dc_sony_t700.jpg")] 
25.             public var phone5:Class; 
26.  
27.         ]]>  
28.     </mx:Script>  
29.       
30.     <mx:TileList id="CameraSelection" height="300" width="240"    
31.         maxColumns="2" rowHeight="100" columnWidth="110" x="84" y="19">  
32.         <mx:dataProvider>  
33.             <mx:Array>  
34.                 <mx:Object label="佳能 IXUS 80" icon="{phone1}"/>  
35.                 <mx:Object label="富士 S1000FD" icon="{phone2}"/>  
36.                 <mx:Object label="尼康 D90" icon="{phone3}"/>  
37.                 <mx:Object label="松下 LX3GK" icon="{phone4}"/>  
38.                 <mx:Object label="索尼 T700" icon="{phone5}"/>  
39.             </mx:Array>  
40.         </mx:dataProvider>  
41.     </mx:TileList>  
42.       
43. </mx:Application>  

3.2 获取TileList控件中的数据
获取TileList控件中的数据是与用户交互的最主要的应用。要获取TileList控件中的某条数据项，需要通过设置其单击事件。本节将讲解如何获取TileList控件中的某条数据项内容。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.   
4.     <mx:Script>  
5.         <![CDATA[ 
6.             import mx.controls.Alert; 
7.             [Bindable] 
8.             [Embed(source="assets/dc_canon_ixus_80.jpg")] 
9.             public var dc1:Class; 
10.               
11.             [Bindable] 
12.             [Embed(source="assets/dc_fuji_s1000fd.jpg")] 
13.             public var dc2:Class; 
14.               
15.             [Bindable] 
16.             [Embed(source="assets/dc_nikon_D90.jpg")] 
17.             public var dc3:Class; 
18.               
19.             [Bindable] 
20.             [Embed(source="assets/dc_panasonic_lx3gk.jpg")] 
21.             public var dc4:Class; 
22.              
23.             [Bindable] 
24.             [Embed(source="assets/dc_sony_t700.jpg")] 
25.             public var dc5:Class; 
26.  
27.             // 数据列表单击事件 
28.             private function DCSelection_change(e:MouseEvent):void 
29.             { 
30.                 // 设置 lbDC 文本控件的内容 
31.                 lbDC.text = "您选择的产品是：" + DCSelection.selectedItem.label; 
32.             } 
33.  
34.         ]]>  
35.     </mx:Script>  
36.       
37.     <mx:TileList id="DCSelection" height="300" width="240" click="DCSelection_change(event)"   
38.             maxColumns="2" rowHeight="100" columnWidth="110" x="86" y="63">  
39.             <mx:dataProvider>  
40.                 <mx:Array>  
41.                     <mx:Object label="佳能 IXUS 80" icon="{dc1}"/>  
42.                     <mx:Object label="富士 S1000FD" icon="{dc2}"/>  
43.                     <mx:Object label="尼康 D90" icon="{dc3}"/>  
44.                     <mx:Object label="松下 LX3GK" icon="{dc4}"/>  
45.                     <mx:Object label="索尼 T700" icon="{dc5}"/>  
46.                 </mx:Array>  
47.             </mx:dataProvider>  
48.         </mx:TileList>  
49.     <mx:Label id="lbDC" x="86" y="32" text="Label" fontSize="14" width="240"/>  
50.       
51. </mx:Application>  

四、下拉列表
相比较与数据列表，下拉列表则有节省空间等优点。

4.1 使用ComBox控件
在Flex中，提供了下拉列表ComBox控件。下拉列表ComBox控件的数据源可以有两种方式，一种是Object类型，另一种是String。其中Object类型可以同时存储相关数据的属性，如编号等。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.   
4.     <mx:ComboBox x="36" y="33" fontSize="14" width="96">  
5.         <mx:ArrayCollection>  
6.             <mx:Object label="北京" data="0" />  
7.             <mx:Object label="上海" data="1" />  
8.             <mx:Object label="广州" data="2" />  
9.             <mx:Object label="深圳" data="3" />  
10.         </mx:ArrayCollection>  
11.     </mx:ComboBox>  
12.     <mx:ComboBox x="151" y="33" fontSize="14">  
13.         <mx:ArrayCollection>  
14.             <mx:String>北京</mx:String>  
15.             <mx:String>上海</mx:String>  
16.             <mx:String>广州</mx:String>  
17.             <mx:String>深圳</mx:String>  
18.         </mx:ArrayCollection>  
19.     </mx:ComboBox>  
20.       
21. </mx:Application>  

4.2 获取下拉列表中的数据
通过单击事件，就可以获取下拉列表中选择的数据项。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.     <mx:Script>  
4.         <![CDATA[ 
5.             import mx.events.DropdownEvent; 
6.              
7.             // 下拉列表控件的 change 事件 
8.             private function cmbCity_change(event:Event):void 
9.             { 
10.                 // 设置 lbCity 文本控件的内容 
11.                 lbCity.text = "城市编号：" + event.currentTarget.selectedItem.data; 
12.                 lbCity.text += " 城市名称：" + event.currentTarget.selectedItem.label; 
13.             } 
14.  
15.         ]]>  
16.     </mx:Script>  
17.     <mx:ComboBox id="cmbCity" x="35" y="60" fontSize="14" width="96"   
18.         change="cmbCity_change(event)">  
19.         <mx:ArrayCollection>  
20.             <mx:Object label="北京" data="0" />  
21.             <mx:Object label="上海" data="1" />  
22.             <mx:Object label="广州" data="2" />  
23.             <mx:Object label="深圳" data="3" />  
24.         </mx:ArrayCollection>  
25.     </mx:ComboBox>  
26.     <mx:Label id="lbCity" x="35" y="23" text="Label" fontSize="14"/>  
27. </mx:Application>  

五、数据网格
数据网格是最常用的数据呈现方式之一，对某些较为复杂的数据只能用数据网格的方式表现。

5.1 使用DataGrid控件
在Flex中已经提供了数据网格DataGrid控件，使用这个控件可以实现二维数据列表的呈现。本节将会讲述如何使用数据网格DataGrid控件，并填充数据集。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.     <mx:DataGrid x="36" y="28">  
4.         <mx:dataProvider>  
5.             <mx:ArrayCollection>  
6.                 <mx:Object>  
7.                     <mx:city>上海</mx:city>  
8.                     <mx:population>1270.22</mx:population>  
9.                 </mx:Object>  
10.                 <mx:Object>  
11.                     <mx:city>北京</mx:city>  
12.                     <mx:population>1067.00</mx:population>  
13.                 </mx:Object>  
14.                 <mx:Object>  
15.                     <mx:city>重庆</mx:city>  
16.                     <mx:population>999.05</mx:population>  
17.                 </mx:Object>  
18.                 <mx:Object>  
19.                     <mx:city>武汉</mx:city>  
20.                     <mx:population>768.10</mx:population>  
21.                 </mx:Object>  
22.                 <mx:Object>  
23.                     <mx:city>天津</mx:city>  
24.                     <mx:population>752.21</mx:population>  
25.                 </mx:Object>  
26.             </mx:ArrayCollection>  
27.         </mx:dataProvider>  
28.     </mx:DataGrid>  
29. </mx:Application>  

5.2 定义DataGrid控件的列
默认情况下，DataGrid控件列的标题为字段名称。通过设置DataGridColumn属性可以自定义列的标题。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.  <mx:DataGrid x="36" y="28">  
4.   <mx:dataProvider>  
5.    <mx:ArrayCollection>  
6.     <mx:Object city="上海" population="1270.22" />  
7.     <mx:Object city="北京" population="1067.00" />  
8.     <mx:Object city="重庆" population="999.05" />  
9.     <mx:Object city="武汉" population="768.10" />  
10.     <mx:Object city="天津" population="752.21" />  
11.    </mx:ArrayCollection>  
12.   </mx:dataProvider>  
13.   <mx:columns>  
14.    <mx:DataGridColumn dataField="city" headerText="城市"/>  
15.    <mx:DataGridColumn dataField="population" headerText="人口"/>  
16.   </mx:columns>  
17.  </mx:DataGrid>  
18. </mx:Application>  

5.3 获取DataGrid控件的数据
想要获取DataGrid控件中指定单元格的数据，需要通过单击事件，使用selectedItem属性得到。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.       
4.     <mx:Script>  
5.         <![CDATA[ 
6.             import mx.events.ListEvent; 
7.              
8.             /** 
9.              * 单击事件 
10.              * */ 
11.             private function itemClickHandle(event:ListEvent):void 
12.             { 
13.                 // 获取城市名称 
14.                 lbCity.text = event.currentTarget.selectedItem.city; 
15.                 // 获取人口 
16.                 lbPopu.text = event.currentTarget.selectedItem.population; 
17.             } 
18.         ]]>  
19.     </mx:Script>  
20.   
21.     <mx:DataGrid id="dg" x="36" y="28" itemClick="itemClickHandle(event)">  
22.         <mx:dataProvider>  
23.             <mx:ArrayCollection>  
24.                 <mx:Object city="上海" population="1270.22" />  
25.                 <mx:Object city="北京" population="1067.00" />  
26.                 <mx:Object city="重庆" population="999.05" />  
27.                 <mx:Object city="武汉" population="768.10" />  
28.                 <mx:Object city="天津" population="752.21" />  
29.             </mx:ArrayCollection>  
30.         </mx:dataProvider>  
31.         <mx:columns>  
32.             <mx:DataGridColumn dataField="city" headerText="城市"/>  
33.             <mx:DataGridColumn dataField="population" headerText="人口"/>  
34.         </mx:columns>  
35.     </mx:DataGrid>  
36.     <mx:Label x="36" y="193" text="城市：" fontSize="14"/>  
37.     <mx:Label x="84" y="193" text="请选择" fontSize="14" id="lbCity"/>  
38.     <mx:Label x="36" y="233" text="人口：" fontSize="14"/>  
39.     <mx:Label x="84" y="233" text="请选择" fontSize="14" id="lbPopu"/>  
40.       
41. </mx:Application>  

5.4 DataGrid控件的排序
在查看网格数据的时候，用户常常需要按照一定的循序查找数据，以最快捷的方式找到需要的数据。排序功能可以做到上述要求，使用户按照自己的方式查找数据。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.   
4.     <mx:Script>  
5.         <![CDATA[ 
6.             import mx.collections.SortField; 
7.             import mx.collections.Sort; 
8.             import mx.collections.ArrayCollection; 
9.             // 定义数据集合 
10.             private var cityArrColl:ArrayCollection; 
11.              
12.             /** 
13.              * 创建数据集合，并绑定到数据网格控件中 
14.              * */ 
15.             private function loadData():void 
16.             { 
17.                 var cityArray:Array = [ 
18.                                         {city:'天津', population:'752.21'}, 
19.                                         {city:'北京', population:'1067.00'}, 
20.                                         {city:'武汉', population:'768.10'}, 
21.                                         {city:'上海', population:'1270.22'}, 
22.                                         {city:'重庆', population:'999.05'} 
23.                                     ]; 
24.                  
25.                 // 创建数据集合 
26.                 cityArrColl = new ArrayCollection(cityArray); 
27.                 // 绑定数据源 
28.                 dgCity.dataProvider = cityArrColl; 
29.             } 
30.              
31.             /** 
32.              * 按照城市名称和人口排序 
33.              * */ 
34.             private function rbgCitySort_change(event:Event):void 
35.             { 
36.                 // 创建 Sort 对象 
37.                 var sortCity:Sort = new Sort(); 
38.                 // 创建两个 SortField 对象，并设置参数 
39.                 var sortByCity:SortField = new SortField("city", true, true); 
40.                 var sortByPopu:SortField = new SortField("population", true, true, true); 
41.                 // 获取单选按钮ID 
42.                 var sortId:String = event.target.selection.id; 
43.                  
44.                 // 根据选择的类型，排序 
45.                 switch(sortId) 
46.                 { 
47.                     case "rbByCity": 
48.                         // 按城市排序 
49.                         sortCity.fields = [sortByCity]; 
50.                         break; 
51.                     case "rbByPopu": 
52.                         // 按人口排序 
53.                         sortCity.fields = [sortByPopu]; 
54.                         break; 
55.                     default: 
56.                         break; 
57.                 } 
58.                  
59.                 // 排序 
60.                 cityArrColl.sort = sortCity; 
61.                 // 刷新数据集 
62.                 cityArrColl.refresh(); 
63.             } 
64.         ]]>  
65.     </mx:Script>  
66.       
67.     <mx:DataGrid id="dgCity" x="39" y="64" fontSize="14" creationComplete="loadData()">  
68.         <mx:columns>  
69.             <mx:DataGridColumn dataField="city" headerText="城市"/>  
70.             <mx:DataGridColumn dataField="population" headerText="人口"/>  
71.         </mx:columns>  
72.     </mx:DataGrid>  
73.       
74.     <mx:RadioButtonGroup id="rbgCitySort" change="rbgCitySort_change(event)" />  
75.     <mx:RadioButton id="rbByCity" x="39" y="24" label="按城市排序"   
76.         groupName="rbgCitySort" fontSize="14"/>  
77.     <mx:RadioButton id="rbByPopu" x="142" y="24" label="按人口排序"   
78.         groupName="rbgCitySort" fontSize="14"/>  
79.       
80. </mx:Application>  

六、 树形式的呈现方式
树是以节点为基础向下延伸的呈现数据的方式。通常树被用作数据导航，但同时，树也需要外部或内部的数据加以绑定。

6.1 使用Tree控件
在Flex中提供了树Tree控件，使用该控件，可以使数据以树的形式表现出来。通常绑定在Tree控件的数据是XML格式的对象。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.     <mx:Tree labelField="@label" width="200" fontSize="14" x="38" y="28">  
4.         <mx:dataProvider>  
5.             <mx:XMLList>  
6.                 <province label="广东省">  
7.                     <city label="广州市" />  
8.                     <city label="深圳市" />  
9.                 </province>  
10.                 <province label="北京市">  
11.                     <city label="朝阳区" />  
12.                     <city label="东城区" />  
13.                 </province>  
14.             </mx:XMLList>  
15.         </mx:dataProvider>  
16.     </mx:Tree>  
17. </mx:Application>  

6.2 获取Tree控件的数据项
获取Tree控件的数据项的方法是通过change事件，selectedItem属性中记录了选取数据项的内容。

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.     <mx:Script>  
4.         <![CDATA[ 
5.             /** 
6.              * change 事件， 获取树形控件选择的数据项 
7.              * */ 
8.             private function treeCity_change(event:Event):void 
9.             { 
10.                 lbCity.text = "你选择的是：" + event.currentTarget.selectedItem.@label; 
11.             } 
12.         ]]>  
13.     </mx:Script>  
14.     <mx:Tree id="treeCity" labelField="@label" width="200" fontSize="14"   
15.         x="38" y="63" change="treeCity_change(event)">  
16.         <mx:dataProvider>  
17.             <mx:XMLList>  
18.                 <province label="广东省">  
19.                     <city label="广州市" />  
20.                     <city label="深圳市" />  
21.                 </province>  
22.                 <province label="北京市">  
23.                     <city label="朝阳区" />  
24.                     <city label="东城区" />  
25.                 </province>  
26.             </mx:XMLList>  
27.         </mx:dataProvider>  
28.     </mx:Tree>  
29.     <mx:Label id="lbCity" x="38" y="32" text="未选择" fontSize="14" width="200"/>  
30. </mx:Application>