Flex中如何利用PopUpButton控件创建一个弹出TitleWindow的例子

接下来的例子演示了Flex中如何利用PopUpButton控件，创建一个弹出TitleWindow（点击按钮会弹出半透明选择窗口）。

让我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:Style>
8.         TitleWindow {
9.             roundedBottomCorners: false;
10.             borderColor: haloSilver;
11.             backgroundColor: haloSilver;
12.             borderAlpha: 0.8;
13.             backgroundAlpha: 0.8;
14.             dropShadowEnabled: false;
15.         }
16.     </mx:Style>
18.     <mx:Script>
19.         <![CDATA[
20.             import mx.controls.CheckBox;
21.             import mx.controls.dataGridClasses.DataGridColumn;
23.             private function checkBox_change(evt:Event):void {
24.                 var ch:CheckBox = evt.currentTarget as CheckBox;
25.                 var idx:int = int(ch.data);
26.                 var obj:Object = arrColl.getItemAt(idx);
27.                 obj.sel = ch.selected;
28.                 arrColl.disableAutoUpdate();
29.                 arrColl.setItemAt(obj, idx);
30.             }
32.             private function selectAll(evt:Event):void {
33.                 var idx:int;
34.                 var item:Object;
35.                 for (idx=0; idx<arrColl.length; idx++) {
36.                     item = arrColl.getItemAt(idx);
37.                     item.sel = CheckBox(evt.currentTarget).selected;
38.                 }
39.                 arrColl.refresh();
40.             }
42.             private function sel_labelFunc(item:Object, col:DataGridColumn):String {
43.                 var bool:Boolean = item.hasOwnProperty("sel") &&
44.                             (item.sel == "true" || item.sel == true);
45.                 return bool.toString();
46.             }
47.         ]]>
48.     </mx:Script>
50.     <mx:ArrayCollection id="arrColl">
51.         <mx:source>
52.             <mx:Array id="arr">
53.                 <mx:Object label="Button" />
54.                 <mx:Object label="ButtonBar" />
55.                 <mx:Object label="CheckBox" />
56.                 <mx:Object label="ColorPicker" sel="true" />
57.                 <mx:Object label="ComboBox" sel="true" />
58.                 <mx:Object label="DataGrid" sel="true" />
59.                 <mx:Object label="DateChooser" />
60.                 <mx:Object label="DateField" sel="true" />
61.                 <mx:Object label="HorizontalList" />
62.                 <mx:Object label="HRule" />
63.                 <mx:Object label="HSlider" />
64.                 <mx:Object label="Image" />
65.                 <mx:Object label="Label" />
66.                 <mx:Object label="LinkBar" />
67.                 <mx:Object label="LinkButton" />
68.                 <mx:Object label="List" sel="true" />
69.                 <mx:Object label="Menu" />
70.                 <mx:Object label="MenuBar" />
71.                 <mx:Object label="NumericStepper" sel="true" />
72.                 <mx:Object label="ProgressBar" />
73.                 <mx:Object label="RadioButton" />
74.                 <mx:Object label="RadioButtonGroup" />
75.                 <mx:Object label="RichTextEditor" sel="true" />
76.                 <mx:Object label="Spacer" />
77.                 <mx:Object label="SWFLoader" />
78.                 <mx:Object label="TabBar" />
79.                 <mx:Object label="Text" />
80.                 <mx:Object label="TextArea" />
81.                 <mx:Object label="TextInput" />
82.                 <mx:Object label="TileList" />
83.                 <mx:Object label="Tree" sel="true" />
84.                 <mx:Object label="VideoDisplay" />
85.                 <mx:Object label="VRule" />
86.                 <mx:Object label="VScrollBar" />
87.                 <mx:Object label="VSlider" />
88.             </mx:Array>
89.         </mx:source>
90.     </mx:ArrayCollection>
92.     <mx:ApplicationControlBar dock="true">
93.         <mx:PopUpButton id="popUpButton"
94.                 label="Please select some components"
95.                 openAlways="true"
96.                 close="arrColl.refresh();">
97.             <mx:popUp>
98.                 <mx:TitleWindow id="titleWin"
99.                         height="200"
100.                         showCloseButton="true"
101.                         verticalScrollPolicy="on"
102.                         horizontalScrollPolicy="off"
103.                         close="popUpButton.close();">
104.                     <mx:ToolBar width="320">
105.                         <mx:Repeater id="myRep"
106.                                 dataProvider="{arrColl}">
107.                             <mx:CheckBox data="{myRep.currentIndex}"
108.                                     label="{myRep.currentItem.label}"
109.                                     selected="{myRep.currentItem.sel}"
110.                                     change="checkBox_change(event);"
111.                                     width="100" />
112.                         </mx:Repeater>
113.                     </mx:ToolBar>
114.                     <mx:ControlBar>
115.                         <mx:CheckBox label="Select All"
116.                                 labelPlacement="left"
117.                                 change="selectAll(event);" />
118.                     </mx:ControlBar>
119.                 </mx:TitleWindow>
120.             </mx:popUp>
121.         </mx:PopUpButton>
122.     </mx:ApplicationControlBar>
124.     <mx:DataGrid dataProvider="{arrColl}">
125.         <mx:columns>
126.             <mx:DataGridColumn dataField="label" />
127.             <mx:DataGridColumn dataField="sel"
128.                     labelFunction="sel_labelFunc" />
129.         </mx:columns>
130.     </mx:DataGrid>
132. </mx:Application>