Flex中如何给TabNavigator控件增加Icons图标

1. <?xmlversion="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">
6.  
7.     <mx:XML id="model">
8.         <records>
9.             <record uuid="1"status="check"name="User 1"data="Data 1"/>
10.             <record uuid="2"status="warning"name="User 2"data="Data 2"/>
11.             <record uuid="3"status="warning"name="User 3"data="Data 3"/>
12.             <record uuid="4"status="critical"name="User 4"data="Data 4"/>
13.             <record uuid="5"status="check"name="User 5"data="Data 5"/>
14.             <record uuid="6"status="check"name="User 6"data="Data 6"/>
15.             <record uuid="7"status="warning"name="User 7"data="Data 7"/>
16.             <record uuid="8"status="critical"name="User 8"data="Data 8"/>
17.         </records>
18.     </mx:XML>
19.  
20.     <mx:Script>
21.         <![CDATA[
22.             [Bindable]
23.             [Embed(source="assets/bulletCheck.png")]
24.             private var BulletCheck:Class;
25.  
26.             [Bindable]
27.             [Embed(source="assets/bulletWarning.png")]
28.             private var BulletWarning:Class;
29.  
30.             [Bindable]
31.             [Embed(source="assets/bulletCritical.png")]
32.             private var BulletCritical:Class;
33.  
34.             private const CHECK:String = "check";
35.             private const WARNING:String = "warning";
36.             private const CRITICAL:String = "critical";
37.         ]]>
38.     </mx:Script>
39.  
40.     <mx:TabNavigator width="400"height="200">
41.         <mx:VBox label="Check"icon="{BulletCheck}">
42.             <mx:DataGrid id="gridCheck"
43.                     width="100%"
44.                     height="100%">
45.                 <mx:columns>
46.                     <mx:DataGridColumn dataField="@name"/>
47.                     <mx:DataGridColumn dataField="@data"/>
48.                 </mx:columns>
49.                 <mx:dataProvider>
50.                     {model.record.(@status == CHECK)}
51.                 </mx:dataProvider>
52.             </mx:DataGrid>
53.         </mx:VBox>
54.  
55.         <mx:VBox label="Warnings"icon="{BulletWarning}">
56.             <mx:DataGrid id="gridWarning"
57.                     width="100%"
58.                     height="100%">
59.                 <mx:columns>
60.                     <mx:DataGridColumn dataField="@name"/>
61.                     <mx:DataGridColumn dataField="@data"/>
62.                 </mx:columns>
63.                 <mx:dataProvider>
64.                     {model.record.(@status == WARNING)}
65.                 </mx:dataProvider>
66.             </mx:DataGrid>
67.         </mx:VBox>
68.  
69.         <mx:VBox label="Errors"icon="{BulletCritical}">
70.             <mx:DataGrid id="gridCritical"
71.                     width="100%"
72.                     height="100%">
73.                 <mx:columns>
74.                     <mx:DataGridColumn dataField="@name"/>
75.                     <mx:DataGridColumn dataField="@data"/>
76.                 </mx:columns>
77.                 <mx:dataProvider>
78.                     {model.record.(@status == CRITICAL)}
79.                 </mx:dataProvider>
80.             </mx:DataGrid>
81.         </mx:VBox>
82.     </mx:TabNavigator>
83.  
84. </mx:Application>