Creating a pop up TitleWindow using the PopUpButton control in Flex

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