Creating a pop up TitleWindow using the PopUpButton control in Flex

The following example shows how you can create a pop up TitleWindow container using the Flex PopUpButton control

<?xml version="1.0" encoding="utf-8"?>

<!-- http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/ -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

        layout="vertical"

        verticalAlign="middle"

        backgroundColor="white">

    <mx:Style>

        TitleWindow {

            roundedBottomCorners: false;

            borderColor: haloSilver;

            backgroundColor: haloSilver;

            borderAlpha: 0.8;

            backgroundAlpha: 0.8;

            dropShadowEnabled: false;

        }

    </mx:Style>

    <mx:Script>

        <![CDATA[

            import mx.controls.CheckBox;

            import mx.controls.dataGridClasses.DataGridColumn;

            private function checkBox_change(evt:Event):void {

                var ch:CheckBox = evt.currentTarget as CheckBox;

                var idx:int = int(ch.data);

                var obj:Object = arrColl.getItemAt(idx);

                obj.sel = ch.selected;

                arrColl.disableAutoUpdate();

                arrColl.setItemAt(obj, idx);

            }

            private function selectAll(evt:Event):void {

                var idx:int;

                var item:Object;

                for (idx=0; idx<arrColl.length; idx++) {

                    item = arrColl.getItemAt(idx);

                    item.sel = CheckBox(evt.currentTarget).selected;

                }

                arrColl.refresh();

            private function sel_labelFunc(item:Object, col:DataGridColumn):String {

                var bool:Boolean = item.hasOwnProperty("sel") &&

                            (item.sel == "true" || item.sel == true);

                return bool.toString();

        ]]>

    </mx:Script>

    <mx:ArrayCollection id="arrColl">

        <mx:source>

            <mx:Array id="arr">

                <mx:Object label="Button" />

                <mx:Object label="ButtonBar" />

                <mx:Object label="CheckBox" />

                <mx:Object label="ColorPicker" sel="true" />

                <mx:Object label="ComboBox" sel="true" />

                <mx:Object label="DataGrid" sel="true" />

                <mx:Object label="DateChooser" />

                <mx:Object label="DateField" sel="true" />

                <mx:Object label="HorizontalList" />

                <mx:Object label="HRule" />

                <mx:Object label="HSlider" />

                <mx:Object label="Image" />

                <mx:Object label="Label" />

                <mx:Object label="LinkBar" />

                <mx:Object label="LinkButton" />

                <mx:Object label="List" sel="true" />

                <mx:Object label="Menu" />

                <mx:Object label="MenuBar" />

                <mx:Object label="NumericStepper" sel="true" />

                <mx:Object label="ProgressBar" />

                <mx:Object label="RadioButton" />

                <mx:Object label="RadioButtonGroup" />

                <mx:Object label="RichTextEditor" sel="true" />

                <mx:Object label="Spacer" />

                <mx:Object label="SWFLoader" />

                <mx:Object label="TabBar" />

                <mx:Object label="Text" />

                <mx:Object label="TextArea" />

                <mx:Object label="TextInput" />

                <mx:Object label="TileList" />

                <mx:Object label="Tree" sel="true" />

                <mx:Object label="VideoDisplay" />

                <mx:Object label="VRule" />

                <mx:Object label="VScrollBar" />

                <mx:Object label="VSlider" />

            </mx:Array>

        </mx:source>

    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">

        <mx:PopUpButton id="popUpButton"

                label="Please select some components"

                openAlways="true"

                close="arrColl.refresh();">

            <mx:popUp>

                <mx:TitleWindow id="titleWin"

                        height="200"

                        showCloseButton="true"

                        verticalScrollPolicy="on"

                        horizontalScrollPolicy="off"

                        close="popUpButton.close();">

                    <mx:ToolBar width="320">

                        <mx:Repeater id="myRep"

                                dataProvider="{arrColl}">

                            <mx:CheckBox data="{myRep.currentIndex}"

                                    label="{myRep.currentItem.label}"

                                    selected="{myRep.currentItem.sel}"

                                    change="checkBox_change(event);"

                                    width="100" />

                        </mx:Repeater>

                    </mx:ToolBar>

                    <mx:ControlBar>

                        <mx:CheckBox label="Select All"

                                labelPlacement="left"

                                change="selectAll(event);" />

                    </mx:ControlBar>

                </mx:TitleWindow>

            </mx:popUp>

        </mx:PopUpButton>

    </mx:ApplicationControlBar>

    <mx:DataGrid dataProvider="{arrColl}">

        <mx:columns>

            <mx:DataGridColumn dataField="label" />

            <mx:DataGridColumn dataField="sel"

                    labelFunction="sel_labelFunc" />

        </mx:columns>

    </mx:DataGrid>

</mx:Application>

    本文转自 OldHawk  博客园博客，原文链接：http://www.cnblogs.com/taobataoma/archive/2008/04/15/1154287.html，如需转载请自行联系原作者