Flex中如何给Accordion控件嵌入Icon图标的例子

By Minidxer | August 13, 2008

接下来的例子演示了Flex中如何给Accordion控件嵌入Icon图标。

让我们先来看一下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">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             [Bindable]
  10.             [Embed(source="assets/bulletCheck.png")]
  11.             private var BulletCheck:Class;
  12.  
  13.             [Bindable]
  14.             [Embed(source="assets/bulletWarning.png")]
  15.             private var BulletWarning:Class;
  16.  
  17.             [Bindable]
  18.             [Embed(source="assets/bulletCritical.png")]
  19.             private var BulletCritical:Class;
  20.         ]]>
  21.     </mx:Script>
  22.  
  23.     <mx:XML id="itemsXML">
  24.         <items>
  25.             <item label="Item 1" status="warning" />
  26.             <item label="Item 2" status="critical" />
  27.             <item label="Item 3" status="critical" />
  28.             <item label="Item 4" status="check" />
  29.             <item label="Item 5" status="warning" />
  30.             <item label="Item 6" status="check" />
  31.             <item label="Item 7" status="check" />
  32.             <item label="Item 8" status="critical" />
  33.         </items>
  34.     </mx:XML>
  35.  
  36.     <mx:ApplicationControlBar dock="true">
  37.         <mx:Label text="selectedIndex: {accordion.selectedIndex}" />
  38.         <mx:Spacer width="100" />
  39.         <mx:Label text="label: {accordion.getHeaderAt(accordion.selectedIndex).label}" />
  40.     </mx:ApplicationControlBar>
  41.  
  42.     <mx:Accordion id="accordion"
  43.             width="400"
  44.             height="200">
  45.         <mx:VBox label="Success"
  46.                 icon="{BulletCheck}"
  47.                 width="100%"
  48.                 height="100%">
  49.             <mx:DataGrid id="successGrid"
  50.                     dataProvider="{itemsXML.item.(@status == 'check')}"
  51.                     width="100%"
  52.                     height="100%">
  53.             </mx:DataGrid>
  54.         </mx:VBox>
  55.  
  56.         <mx:VBox label="Warning"
  57.                 icon="{BulletWarning}"
  58.                 width="100%"
  59.                 height="100%">
  60.             <mx:DataGrid id="warningGrid"
  61.                     dataProvider="{itemsXML.item.(@status == 'warning')}"
  62.                     width="100%"
  63.                     height="100%">
  64.             </mx:DataGrid>
  65.         </mx:VBox>
  66.  
  67.         <mx:VBox label="Critical"
  68.                 icon="{BulletCritical}"
  69.                 width="100%"
  70.                 height="100%">
  71.             <mx:DataGrid id="criticalGrid"
  72.                     dataProvider="{itemsXML.item.(@status == 'critical')}"
  73.                     width="100%"
  74.                     height="100%">
  75.             </mx:DataGrid>
  76.         </mx:VBox>
  77.     </mx:Accordion>
  78.  
  79. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads