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

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

?????????????*?单击选择事件?
1. ????????????private?function?listCity_click():void?
2. ????????????????lbSelectItem.text?=?"您选择的是："?+?listCity.selectedItem.label?+??
3. ????????????????????????????????????"("?+?listCity.selectedItem.data?+?")";?
4. ????????????}?
5. ????????]]>??
6. ????</mx:Script>??
7. ????<mx:List?id="listCity"?labelField="label"?click="listCity_click()"??
8. ????????x="43"?y="29"?width="93"?height="137"?fontSize="14">??
9. ????<mx:Label?id="lbSelectItem"?x="10"?y="189"?text=""?fontSize="14"?width="183"?color="#FFFFFF"/>??
10. </mx:Application>??

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

????????????//?定义手机图标，并嵌入到程序中?
1. ????????????[Embed(source="assets/mobileIcon.jpg")]?
2. ????????????private?var?mobileSymbol:Class;?
3. ?
4. ?????????????*?初始化，绑定数据?
5. ????????????????//?定义数组?
6. ????????????????var?mobileArr:Array?=??
7. ????????????????[?
8. ????????????????????{mobileIcon:mobileSymbol,?mobile:"摩托罗拉",?ballot:"12.9%"},?
9. ?
10. ?
11. ????????????????]?
12. ?????????????????
13. ????????????????//?绑定数据?
14. ????????????????listMobile.dataProvider?=?mobileArr;?
15. ????<mx:List?id="listMobile"?labelField="mobile"?iconField="mobileIcon"?x="40"?y="30"?width="125"?fontSize="14"?/>??
16. </mx:Application>??

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

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

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

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

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

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

??
1. ?????????????
2. ????????????[Bindable]?
3. ????????????[Embed(source="assets/dc_canon_ixus_80.jpg")]?
4. ????????????public?var?phone1:Class;?
5. ??????????????
6. ????????????[Embed(source="assets/dc_fuji_s1000fd.jpg")]?
7. ????????????public?var?phone2:Class;?
8. ????????????[Embed(source="assets/dc_nikon_D90.jpg")]?
9. ????????????public?var?phone3:Class;?
10. ????????????[Embed(source="assets/dc_panasonic_lx3gk.jpg")]?
11. ????????????public?var?phone4:Class;?
12. ????????????[Embed(source="assets/dc_sony_t700.jpg")]?
13. ????????????public?var?phone5:Class;?
14. ?
15. ??????
16. ????<mx:TileList?id="CameraSelection"?height="300"?width="240"????
17. ????????maxColumns="2"?rowHeight="100"?columnWidth="110"?x="84"?y="19">??
18. ????????????<mx:Array>??
19. ????????????????<mx:Object?label="佳能?IXUS?80"?icon="{phone1}"/>??
20. ????????????????<mx:Object?label="富士?S1000FD"?icon="{phone2}"/>??
21. ????????????????<mx:Object?label="尼康?D90"?icon="{phone3}"/>??
22. ????????????????<mx:Object?label="松下?LX3GK"?icon="{phone4}"/>??
23. ????????????????<mx:Object?label="索尼?T700"?icon="{phone5}"/>??
24. ????????????</mx:Array>??
25. ????????</mx:dataProvider>??
26. ????</mx:TileList>??
27. </mx:Application>??

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

????????????import?mx.controls.Alert;?
1. ????????????public?var?dc1:Class;?
2. ????????????public?var?dc2:Class;?
3. ????????????public?var?dc3:Class;?
4. ????????????public?var?dc4:Class;?
5. ????????????public?var?dc5:Class;?
6. ????????????//?数据列表单击事件?
7. ????????????private?function?DCSelection_change(e:MouseEvent):void?
8. ????????????{?
9. ????????????????//?设置?lbDC?文本控件的内容?
10. ????????????????lbDC.text?=?"您选择的产品是："?+?DCSelection.selectedItem.label;?
11. ????<mx:TileList?id="DCSelection"?height="300"?width="240"?click="DCSelection_change(event)"???
12. ????????????maxColumns="2"?rowHeight="100"?columnWidth="110"?x="86"?y="63">??
13. ????????????<mx:dataProvider>??
14. ????????????????<mx:Array>??
15. ????????????????????<mx:Object?label="佳能?IXUS?80"?icon="{dc1}"/>??
16. ????????????????????<mx:Object?label="富士?S1000FD"?icon="{dc2}"/>??
17. ????????????????????<mx:Object?label="尼康?D90"?icon="{dc3}"/>??
18. ????????????????????<mx:Object?label="松下?LX3GK"?icon="{dc4}"/>??
19. ????????????????????<mx:Object?label="索尼?T700"?icon="{dc5}"/>??
20. ????????????????</mx:Array>??
21. ????????????</mx:dataProvider>??
22. ????????</mx:TileList>??
23. ????<mx:Label?id="lbDC"?x="86"?y="32"?text="Label"?fontSize="14"?width="240"/>??
24. </mx:Application>??

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

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

????<mx:ComboBox?x="36"?y="33"?fontSize="14"?width="96">??
1. ????????<mx:ArrayCollection>??
2. ????????????<mx:Object?label="北京"?data="0"?/>??
3. ????????????<mx:Object?label="上海"?data="1"?/>??
4. ????????????<mx:Object?label="广州"?data="2"?/>??
5. ????????????<mx:Object?label="深圳"?data="3"?/>??
6. ????????</mx:ArrayCollection>??
7. ????</mx:ComboBox>??
8. ????<mx:ComboBox?x="151"?y="33"?fontSize="14">??
9. ????????????<mx:String>北京</mx:String>??
10. ????????????<mx:String>上海</mx:String>??
11. ????????????<mx:String>广州</mx:String>??
12. ????????????<mx:String>深圳</mx:String>??
13. </mx:Application>??

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

????<mx:Script>??
1. ????????<![CDATA[?
2. ????????????import?mx.events.DropdownEvent;?
3. ????????????//?下拉列表控件的?change?事件?
4. ????????????private?function?cmbCity_change(event:Event):void?
5. ????????????????//?设置?lbCity?文本控件的内容?
6. ????????????????lbCity.text?=?"城市编号："?+?event.currentTarget.selectedItem.data;?
7. ????????????????lbCity.text?+=?"?城市名称："?+?event.currentTarget.selectedItem.label;?
8. ????<mx:ComboBox?id="cmbCity"?x="35"?y="60"?fontSize="14"?width="96"???
9. ????????change="cmbCity_change(event)">??
10. ????<mx:Label?id="lbCity"?x="35"?y="23"?text="Label"?fontSize="14"/>??
11. </mx:Application>??

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

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

????<mx:DataGrid?x="36"?y="28">??
1. ????????????<mx:ArrayCollection>??
2. ????????????????<mx:Object>??
3. ????????????????????<mx:city>上海</mx:city>??
4. ????????????????????<mx:population>1270.22</mx:population>??
5. ????????????????</mx:Object>??
6. ????????????????????<mx:city>北京</mx:city>??
7. ????????????????????<mx:population>1067.00</mx:population>??
8. ????????????????????<mx:city>重庆</mx:city>??
9. ????????????????????<mx:population>999.05</mx:population>??
10. ????????????????????<mx:city>武汉</mx:city>??
11. ????????????????????<mx:population>768.10</mx:population>??
12. ????????????????????<mx:city>天津</mx:city>??
13. ????????????????????<mx:population>752.21</mx:population>??
14. ????????????</mx:ArrayCollection>??
15. ????</mx:DataGrid>??
16. </mx:Application>??

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

?<mx:DataGrid?x="36"?y="28">??
1. ??<mx:dataProvider>??
2. ???<mx:ArrayCollection>??
3. ????<mx:Object?city="上海"?population="1270.22"?/>??
4. ????<mx:Object?city="北京"?population="1067.00"?/>??
5. ????<mx:Object?city="重庆"?population="999.05"?/>??
6. ????<mx:Object?city="武汉"?population="768.10"?/>??
7. ????<mx:Object?city="天津"?population="752.21"?/>??
8. ???</mx:ArrayCollection>??
9. ??</mx:dataProvider>??
10. ??<mx:columns>??
11. ???<mx:DataGridColumn?dataField="city"?headerText="城市"/>??
12. ???<mx:DataGridColumn?dataField="population"?headerText="人口"/>??
13. ??</mx:columns>??
14. ?</mx:DataGrid>??
15. </mx:Application>??

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

????????????import?mx.events.ListEvent;?
1. ?????????????*?单击事件?
2. ????????????private?function?itemClickHandle(event:ListEvent):void?
3. ????????????????//?获取城市名称?
4. ????????????????lbCity.text?=?event.currentTarget.selectedItem.city;?
5. ????????????????//?获取人口?
6. ????????????????lbPopu.text?=?event.currentTarget.selectedItem.population;?
7. ??
8. ????<mx:DataGrid?id="dg"?x="36"?y="28"?itemClick="itemClickHandle(event)">??
9. ????????????????<mx:Object?city="上海"?population="1270.22"?/>??
10. ????????????????<mx:Object?city="北京"?population="1067.00"?/>??
11. ????????????????<mx:Object?city="重庆"?population="999.05"?/>??
12. ????????????????<mx:Object?city="武汉"?population="768.10"?/>??
13. ????????????????<mx:Object?city="天津"?population="752.21"?/>??
14. ????????????</mx:ArrayCollection>??
15. ????????<mx:columns>??
16. ????????????<mx:DataGridColumn?dataField="city"?headerText="城市"/>??
17. ????????????<mx:DataGridColumn?dataField="population"?headerText="人口"/>??
18. ????????</mx:columns>??
19. ????</mx:DataGrid>??
20. ????<mx:Label?x="36"?y="193"?text="城市："?fontSize="14"/>??
21. ????<mx:Label?x="84"?y="193"?text="请选择"?fontSize="14"?id="lbCity"/>??
22. ????<mx:Label?x="36"?y="233"?text="人口："?fontSize="14"/>??
23. ????<mx:Label?x="84"?y="233"?text="请选择"?fontSize="14"?id="lbPopu"/>??
24. </mx:Application>??

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

????????????import?mx.collections.SortField;?
1. ????????????import?mx.collections.Sort;?
2. ????????????//?定义数据集合?
3. ????????????private?var?cityArrColl:ArrayCollection;?
4. ?????????????*?创建数据集合，并绑定到数据网格控件中?
5. ????????????private?function?loadData():void?
6. ????????????????var?cityArray:Array?=?[?
7. ????????????????????????????????????????{city:'天津',?population:'752.21'},147); background-color:inherit">????????????????????????????????????????{city:'北京',?population:'1067.00'},147); background-color:inherit">????????????????????????????????????????{city:'武汉',?population:'768.10'},147); background-color:inherit">????????????????????????????????????????{city:'上海',?population:'1270.22'},147); background-color:inherit">????????????????????????????????????????{city:'重庆',?population:'999.05'}?
8. ????????????????????????????????????];?
9. ????????????????//?创建数据集合?
10. ????????????????cityArrColl?=?new?ArrayCollection(cityArray);?
11. ????????????????//?绑定数据源?
12. ????????????????dgCity.dataProvider?=?cityArrColl;?
13. ????????????/**?
14. ?????????????*?按照城市名称和人口排序?
15. ?????????????*?*/?
16. ????????????private?function?rbgCitySort_change(event:Event):void?
17. ????????????????//?创建?Sort?对象?
18. ????????????????var?sortCity:Sort?=?new?Sort();?
19. ????????????????//?创建两个?SortField?对象，并设置参数?
20. ????????????????var?sortByCity:SortField?=?new?SortField("city",?true,?true);?
21. ????????????????var?sortByPopu:SortField?=?new?SortField("population",?true);?
22. ????????????????//?获取单选按钮ID?
23. ????????????????var?sortId:String?=?event.target.selection.id;?
24. ????????????????//?根据选择的类型，排序?
25. ????????????????switch(sortId)?
26. ????????????????{?
27. ????????????????????case?"rbByCity":?
28. ????????????????????????//?按城市排序?
29. ????????????????????????sortCity.fields?=?[sortByCity];?
30. ????????????????????????break;?
31. ????????????????????case?"rbByPopu":?
32. ????????????????????????//?按人口排序?
33. ????????????????????????sortCity.fields?=?[sortByPopu];?
34. ????????????????????default:?
35. ????????????????}?
36. ????????????????//?排序?
37. ????????????????cityArrColl.sort?=?sortCity;?
38. ????????????????//?刷新数据集?
39. ????????????????cityArrColl.refresh();?
40. ????<mx:DataGrid?id="dgCity"?x="39"?y="64"?fontSize="14"?creationComplete="loadData()">??
41. ????????<mx:columns>??
42. ????????????<mx:DataGridColumn?dataField="city"?headerText="城市"/>??
43. ????????????<mx:DataGridColumn?dataField="population"?headerText="人口"/>??
44. ????????</mx:columns>??
45. ????<mx:RadioButtonGroup?id="rbgCitySort"?change="rbgCitySort_change(event)"?/>??
46. ????<mx:RadioButton?id="rbByCity"?x="39"?y="24"?label="按城市排序"???
47. ????????groupName="rbgCitySort"?fontSize="14"/>??
48. ????<mx:RadioButton?id="rbByPopu"?x="142"?y="24"?label="按人口排序"???
49. </mx:Application>??

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

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

????<mx:Tree?labelField="@label"?width="200"?fontSize="14"?x="38"?y="28">??
1. ????????????<mx:XMLList>??
2. ????????????????<province?label="广东省">??
3. ????????????????????<city?label="广州市"?/>??
4. ????????????????????<city?label="深圳市"?/>??
5. ????????????????</province>??
6. ????????????????<province?label="北京市">??
7. ????????????????????<city?label="朝阳区"?/>??
8. ????????????????????<city?label="东城区"?/>??
9. ????????????</mx:XMLList>??
10. ????</mx:Tree>??
11. </mx:Application>??

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

?????????????*?change?事件，?获取树形控件选择的数据项?
1. ????????????private?function?treeCity_change(event:Event):void?
2. ????????????????lbCity.text?=?"你选择的是："?+?event.currentTarget.selectedItem.@label;?
3. ????<mx:Tree?id="treeCity"?labelField="@label"?width="200"?fontSize="14"???
4. ????????x="38"?y="63"?change="treeCity_change(event)">??
5. ????<mx:Label?id="lbCity"?x="38"?y="32"?text="未选择"?fontSize="14"?width="200"/>??
6. </mx:Application>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!