Flex中如何根据Accordion容器内项目调整宽度的例子

By Minidxer | August 13, 2008

接下来的例子演示了Flex中如何根据Accordion容器内项目调整宽度。

让我们先来看一下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="top"
  5.         backgroundColor="white">
  6.  
  7.     <mx:XML id="itemsXML">
  8.         <items>
  9.             <item label="Item 1" status="warning" />
  10.             <item label="Item 2" status="critical" />
  11.             <item label="Item 3" status="critical" />
  12.             <item label="Item 4" status="check" />
  13.             <item label="Item 5" status="warning" />
  14.             <item label="Item 6" status="check" />
  15.             <item label="Item 7" status="check" />
  16.             <item label="Item 8" status="critical" />
  17.         </items>
  18.     </mx:XML>
  19.  
  20.     <mx:XMLListCollection id="checkXLC"
  21.             source="{itemsXML.item.(@status == 'check')}" />
  22.  
  23.     <mx:XMLListCollection id="warningXLC"
  24.             source="{itemsXML.item.(@status == 'warning')}" />
  25.  
  26.     <mx:XMLListCollection id="criticalXLC"
  27.             source="{itemsXML.item.(@status == 'critical')}" />
  28.  
  29.     <mx:Accordion id="accordion"
  30.             resizeToContent="true"
  31.             historyManagementEnabled="false"
  32.             width="400">
  33.         <mx:VBox label="Success" width="100%">
  34.             <mx:DataGrid id="successGrid"
  35.                     dataProvider="{checkXLC}"
  36.                     width="100%"
  37.                     rowCount="{checkXLC.length + 1}">
  38.             </mx:DataGrid>
  39.         </mx:VBox>
  40.  
  41.         <mx:VBox label="Warning" width="100%">
  42.             <mx:DataGrid id="warningGrid"
  43.                     dataProvider="{warningXLC}"
  44.                     width="100%"
  45.                     rowCount="{warningXLC.length + 1}">
  46.             </mx:DataGrid>
  47.         </mx:VBox>
  48.  
  49.         <mx:VBox label="Critical" width="100%">
  50.             <mx:DataGrid id="criticalGrid"
  51.                     dataProvider="{criticalXLC}"
  52.                     width="100%"
  53.                     rowCount="{criticalXLC.length + 1}">
  54.             </mx:DataGrid>
  55.         </mx:VBox>
  56.     </mx:Accordion>
  57.  
  58. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , ,

Related Post

2 comments | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads