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>