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 >
<!-- 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
,如需转载请自行联系原作者