Flex4 spark panel 布局

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/18/setting-the-layout-direction-on-a-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_layout_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <fx:Script>
        <![CDATA[
            import spark.layouts.supportClasses.LayoutBase;
            import mx.events.IndexChangedEvent;
            import spark.layouts.*;

            protected function dropDownList_selectionChanged(evt:IndexChangedEvent):void {
                var panelLayout:LayoutBase;
                switch (dropDownList.selectedItem) {
                    case "VerticalLayout":
                        panelLayout = new VerticalLayout();
                        break;
                    case "HorizontalLayout":
                        panelLayout = new HorizontalLayout();
                        break;
                    case "TileLayout":
                        var tileLayout:TileLayout = new TileLayout();
                        tileLayout.requestedColumnCount = 3;
                        panelLayout = tileLayout;
                        break;
                    default:
                        panelLayout = new BasicLayout();
                        break;
                }
                panel.layout = panelLayout;
            }
        ]]>
    </fx:Script>

    <mx:Form>
        <mx:FormItem label="layout:">
            <s:DropDownList id="dropDownList"
                    requiresSelection="true"
                    selectionChanged="dropDownList_selectionChanged(event);">
                <s:dataProvider>
                    <s:ArrayList>
                        <fx:String>VerticalLayout</fx:String>
                        <fx:String>HorizontalLayout</fx:String>
                        <fx:String>TileLayout</fx:String>
                    </s:ArrayList>
                </s:dataProvider>
            </s:DropDownList>
        </mx:FormItem>
    </mx:Form>

    <s:Panel id="panel"
            title="I'm a Spark Panel title"
            horizontalCenter="0"
            verticalCenter="0">
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        <s:Button label="One" />
        <s:Button label="Two" />
        <s:Button label="Three" />
        <s:Button label="Four" />
        <s:Button label="Five" />
    </s:Panel>

</s:Application>

评论

1 楼 老妖子 2010-08-09  

楼主能不能给点解释啊，刚入门，看不大懂