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.

You can also set the Panel container’s layout to “absolute”. For an example, see “Setting the border thickness in a Flex Panel container”.

Full code after the jump.

View MXML

<?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">

    <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>

View source is enabled in the following example.

Tagged as: layout