The following example shows how you can create a pop up TitleWindow container using the Flex PopUpButton control.
Full code after the jump.
<?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 comments… read them below or add one }
hi…nice blog:)
This is another flex blog i found interesting…
http://dougmccune.com/blog/
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.
Icep,
Interesting. Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case?
Thanks,
Peter
Icep,
did you file a bug? I have the “same” problem, but it happens when I resize a VDividedBox that it is in.
I’m having the same problem – doesn’t work in a viewstack. Trying to find a workaround.
iam having a same problem does not work in accordion
hi shwetha u have posted a nice blog
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
Is it possible to make the popped out TitleWindow modal ?
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();}
}
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!
Daniel , focusEnabled=false will solve your problem
To everyone who is having trouble with the popup button not working after changing states: Download the 3.2 (or greater) SDK or update for flex builder and your problem will be fixed.
You can grab the FlexBuilder updater here:
http://www.adobe.com/support/flex/downloads_updaters.html#flex3
Or just the SDK here:
http://opensource.adobe.com/wiki/display/flexsdk/Downloads
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
Has anyone figured out a method for making the popupbutton titlewindow modal?
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();}
}
Peter D, Where is the delete comment button?