Flex中如何通过direction属性设置ControlBar容器布局的例子
By Minidxer | April 2, 2009
接下来的例子演示了Flex中如何通过direction属性,设置ControlBar容器布局。
让我们先来看一下Demo(可以右键View Source或点击这里察看源代码):
下面是完整代码(或点击这里察看):
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white">
- <mx:Array id="arr">
- <mx:Object label="Button" />
- <mx:Object label="ButtonBar" />
- <mx:Object label="CheckBox" />
- <mx:Object label="ColorPicker" />
- <mx:Object label="ComboBox" />
- <mx:Object label="DataGrid" />
- </mx:Array>
- <mx:ApplicationControlBar dock="true">
- <mx:ToggleButtonBar id="toggleButtonBar"
- selectedIndex="1"
- itemClick="cBar.direction = event.label;">
- <mx:dataProvider>
- <mx:Array>
- <mx:String>horizontal</mx:String>
- <mx:String>vertical</mx:String>
- </mx:Array>
- </mx:dataProvider>
- </mx:ToggleButtonBar>
- </mx:ApplicationControlBar>
- <mx:Panel id="panel"
- width="320"
- height="160">
- <mx:List id="list"
- dataProvider="{arr}"
- width="100%"
- rowCount="{arr.length}" />
- <mx:ControlBar id="cBar"
- direction="vertical"
- horizontalAlign="right">
- <mx:Button label="Submit" />
- <mx:Button label="Cancel" />
- </mx:ControlBar>
- </mx:Panel>
- </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子
Topics:
ControlBar |
No Comments » |
812 views
Tags: ControlBar, direction