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="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="horizontal" /> <mx:Object label="vertical" /> </mx:Array> <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:ControlBar> <mx:Button label="Submit" /> <mx:Button label="Cancel" /> </mx:ControlBar> </mx:Panel> </mx:Application>