Flex中如何通过direction属性设置ControlBar容器布局的例子

By Minidxer | April 2, 2009

接下来的例子演示了Flex中如何通过direction属性,设置ControlBar容器布局。

让我们先来看一下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:Array id="arr">
  8.         <mx:Object label="Button" />
  9.         <mx:Object label="ButtonBar" />
  10.         <mx:Object label="CheckBox" />
  11.         <mx:Object label="ColorPicker" />
  12.         <mx:Object label="ComboBox" />
  13.         <mx:Object label="DataGrid" />
  14.     </mx:Array>
  15.  
  16.     <mx:ApplicationControlBar dock="true">
  17.         <mx:ToggleButtonBar id="toggleButtonBar"
  18.                 selectedIndex="1"
  19.                 itemClick="cBar.direction = event.label;">
  20.             <mx:dataProvider>
  21.                 <mx:Array>
  22.                     <mx:String>horizontal</mx:String>
  23.                     <mx:String>vertical</mx:String>
  24.                 </mx:Array>
  25.             </mx:dataProvider>
  26.         </mx:ToggleButtonBar>
  27.     </mx:ApplicationControlBar>
  28.  
  29.     <mx:Panel id="panel"
  30.             width="320"
  31.             height="160">
  32.         <mx:List id="list"
  33.                 dataProvider="{arr}"
  34.                 width="100%"
  35.                 rowCount="{arr.length}" />
  36.         <mx:ControlBar id="cBar"
  37.                 direction="vertical"
  38.                 horizontalAlign="right">
  39.             <mx:Button label="Submit" />
  40.             <mx:Button label="Cancel" />
  41.         </mx:ControlBar>
  42.     </mx:Panel>
  43.  
  44. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: ControlBar | No Comments » | Tags: ,

Search Posts