<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/13/setting-the-child-layout-direction-of-a-flex-panel-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <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>

