Flex中如何通过horizontalAlign样式设置ControlBar水平方向对齐方式的例子
By Minidxer | April 16, 2009
接下来的例子演示了Flex中如何通过horizontalAlign样式,设置ControlBar水平方向对齐方式。
让我们先来看一下Demo(可以右键View Source或点击这里察看源代码):
下面是完整代码(或点击这里察看):
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <!-- http://blog.flexexamples.com/2008/02/24/aligning-items-horizontally-in-a-controlbar-container-in-flex/ -->
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white">
- <mx:Script>
- <![CDATA[
- import mx.events.ItemClickEvent;
- private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
- cBar.setStyle("horizontalAlign", evt.label);
- }
- ]]>
- </mx:Script>
- <mx:Array id="arr">
- <mx:Object label="left" />
- <mx:Object label="center" />
- <mx:Object label="right" />
- </mx:Array>
- <mx:ApplicationControlBar dock="true">
- <mx:Form styleName="plain">
- <mx:FormItem label="horizontalAlign:">
- <mx:ToggleButtonBar id="toggleButtonBar"
- dataProvider="{arr}"
- selectedIndex="0"
- itemClick="toggleButtonBar_itemClick(event);" />
- </mx:FormItem>
- </mx:Form>
- </mx:ApplicationControlBar>
- <mx:Panel id="panel"
- width="320"
- height="160">
- <mx:Label text="Button" />
- <mx:Label text="ButtonBar" />
- <mx:Label text="CheckBox" />
- <mx:Label text="ColorPicker" />
- <mx:Label text="ComboBox" />
- <mx:Label text="DataGrid" />
- <mx:ControlBar id="cBar">
- <mx:Button label="Submit" />
- <mx:Button label="Cancel" />
- </mx:ControlBar>
- </mx:Panel>
- </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子
Topics:
ControlBar |
No Comments » |
Tags: ControlBar, horizontalAlign