Flex中如何给Accordion创建一个简单按钮作为其头部????

解决方案 »

  1.   

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">
     
        <mx:Script>
            <![CDATA[
                [Bindable]
                [Embed(source="assets/Accordion.png")]
                private var AccordionIcon:Class;
     
                [Bindable]
                [Embed(source="assets/ApplicationControlBar.png")]
                private var ApplicationControlBarIcon:Class;
     
                [Bindable]
                [Embed(source="assets/Box.png")]
                private var BoxIcon:Class;
     
                [Bindable]
                [Embed(source="assets/Canvas.png")]
                private var CanvasIcon:Class;
     
                [Bindable]
                [Embed(source="assets/ControlBar.png")]
                private var ControlBarIcon:Class;
            ]]>
        </mx:Script>
     
        <mx:Accordion id="accordion" backgroundAlpha="0.0"
                height="100%"
                width="100%"
                headerHeight="32"
                borderStyle="none"
                historyManagementEnabled="false">
            <mx:headerRenderer>
                <mx:Component>
                    <mx:Button fontWeight="normal"
                            labelPlacement="left"
                            textAlign="left"
                            cornerRadius="{outerDocument.accordion.getStyle('headerHeight')/2}" />
                </mx:Component>
            </mx:headerRenderer>
     
            <mx:VBox label="Accordion"
                    icon="{AccordionIcon}">
                <mx:Label text="The quick brown fox..." />
            </mx:VBox>
     
            <mx:VBox label="ApplicationControlBar"
                    icon="{ApplicationControlBarIcon}">
                <mx:Label text="The quick brown fox..." />
            </mx:VBox>
     
            <mx:VBox label="Box"
                    icon="{BoxIcon}">
                <mx:Label text="The quick brown fox..." />
            </mx:VBox>
     
            <mx:VBox label="Canvas"
                    icon="{CanvasIcon}">
                <mx:Label text="The quick brown fox..." />
            </mx:VBox>
     
            <mx:VBox label="ControlBar"
                    icon="{ControlBarIcon}">
                <mx:Label text="The quick brown fox..." />
            </mx:VBox>
        </mx:Accordion>
     
    </mx:Application>