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.

Full code after the jump.

View MXML

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

View source is enabled in the following example.

17 thoughts on “Creating a pop up TitleWindow using the PopUpButton control in Flex

  1. Hi, i have a problem with this code. When I change a state in my application, the popupbutton stops working, nothing happens when clicking on the button.

  2. Icep,

    did you file a bug? I have the “same” problem, but it happens when I resize a VDividedBox that it is in.

  3. I have a form designed using Flex. The form does not fit the screen area and hence I am having scroll bars in it. When we click on some of the controls in the form, we open popups. But when the popup is opened, if we scroll the form using the form scroll bar then the popup is not getting scrolled. I want the popup to be scrolled along with the form elements. Please let me know how this can be done.

    Thanks

    Abhilash

    1. Ian,
      The easiest way i could think of is to override the close function of PopUpButton and use a boolean flag to actually close at your beck and call vis-a-vis when u click on the close button instead of focusOut.

      override public function close():void {
      if(flag == true){ super.close();}
      }

  4. When you first load, and hit the popupbutton and check off Select All, it closes the popup…then when you expand it again, it works fine.

    Seems like the first time Select All is checked, it doesn’t work and just closes the popup.

    Any thoughts?

    Thanks!

    1. right now we can able draga and drop this pop up how can we stop this drag and drip feature for the multimple select code

  5. Matthew, The easiest way i could think of is to override the close function of PopUpButton and use a boolean flag to actually close at your beck and call vis-a-vis when u click on the close button instead of focusOut.

    override public function close():void {
    if(flag == true){ super.close();}
    }

Comments are closed.