Search Flex Components Free

Custom Search

January 14, 2008

Setting the child layout direction of a Flex Panel container

The following example shows how you can set a Panel container’s layout to horizontal or vertical in Flex by setting the layout property.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="vertical" verticalAlign="middle" backgroundColor="white">
<mx:Array id="arr">
<mx:Object label="horizontal" />
<mx:Object label="vertical" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">

<mx:FormItem label="layout:">
<mx:ToggleButtonBar id="toggleButtonBar" dataProvider="{arr}"
selectedIndex="1" itemClick="panel.layout = event.label;" />
</mx:FormItem> </mx:Form> </mx:ApplicationControlBar>
<mx:Panel id="panel" status="{panel.layout}" 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:Button label="Submit" />
<mx:Button label="Cancel" />

Related Flex Tutorials