参考了杜增强的dpanel和Flex Doc Team的关于Creating Resizable and Draggable Flex Components
连接：
dpanel
Creating Resizable and Draggable Flex Components
demo
下载
示例：
代码：
application.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
xmlns:mdi="ext.containers.windows.mdi.*" width="100%" height="100%"
creationComplete="initCollections();">
<mx:Script>
<![CDATA[
import mx.events.MenuEvent;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.managers.PopUpManager;
import mx.managers.SystemManager;
import mx.containers.Panel;
import ext.containers.windows.mdi.ChildWindow;
import mx.events.FlexEvent;
private var menuBarXML:XMLList =
<>
<menuitem label = "windows">
<menuitem label ="create window" data="createWindow"/>
<menuitem label ="close window" data="closeWindow"/>
<menuitem label ="max window" data ="maxWindow"/>
<menuitem label ="min window" data = "minWindow"/>
<menuitem label ="min all windows" data ="minAllWindows"/>
<menuitem label ="Tile window" data ="tileWindow"/>
<menuitem label ="Cascade window" data ="cascadeWindow"/>
</menuitem>
<menuitem label ="modal window">
<menuitem label ="create modal window" data ="showModal"/>
</menuitem>
</>;
[Bindable]
private var menuBarCollection:XMLListCollection;
private function initCollections():void
{
menuBarCollection = new XMLListCollection(menuBarXML);
}
private function menuHandler(e:MenuEvent):void{
//Alert.show(e.item.@data);
switch(String(e.item.@data)){
case "createWindow":
new MDITest1().addToMainArea();
break;
case "showModal":
(new ModalWindow()).showModal();
break;
case "closeWindow":
ma.windowClose();
break;
case "maxWindow":
ma.maxActiveWindow();
break;
case "minWindow":
ma.minActiveWindow();
break;
case "minAllWindows":
ma.windowMinimizeAll();
break;
case "tileWindow":
ma.windowTileHorizontal();
break;
case "cascadeWindow":
ma.windowCascade();
break;
}
}
]]>
</mx:Script>
<mx:MenuBar x="0" y="0" labelField="@label" itemClick="menuHandler(event);"
dataProvider="{menuBarCollection}" width="100%" />
<mdi:MainArea id="ma" width="100%" height="100%"/>
</mx:Application>
MDITest1.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <ChildWindow xmlns="ext.containers.windows.mdi.*" xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="300" xmlns:flexlib="flexlib.containers.*" title="child window">
3 <flexlib:Docker>
4 <flexlib:DockableToolBar width="215">
5 <mx:Button width="30" label="B" fontWeight="bold" fontFamily="Arial"/>
6 <mx:Button width="32" label="I" fontStyle="italic"/>
7 </flexlib:DockableToolBar>
8 </flexlib:Docker>
9 </ChildWindow>
ModalWindow.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <Window xmlns="ext.containers.windows.*"
3 xmlns:mx="http://www.adobe.com/2006/mxml" width="412" height="322"
4 layout="absolute" xmlns:flexlib="flexlib.containers.*"
5 title="This is a modal window" >
6 <mx:Script>
7 <![CDATA[
8 import mx.controls.Alert;
9 ]]>
10 </mx:Script>
11 <mx:Button label="close" x="331" y="246" click="modalResult = Alert.CANCEL;"/>
12 <flexlib:SuperTabNavigator x="10" y="10" width="376" height="221" tabEnabled="true">
13 <mx:Canvas label="one" width="100%" height="100%">
14 <mx:DataGrid x="5" y="0" width="100%" height="100%">
15 <mx:columns>
16 <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
17 <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
18 <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
19 </mx:columns>
20 </mx:DataGrid>
21 </mx:Canvas>
22 <mx:Canvas label="two" width="100%" height="100%">
23 </mx:Canvas>
24 <mx:Canvas label="three" width="100%" height="100%">
25 </mx:Canvas>
26 <mx:Canvas label="four" width="100%" height="100%">
27 </mx:Canvas>
28 </flexlib:SuperTabNavigator>
29 <mx:Button label="ok" x="288" y="246" click="modalResult = Alert.OK"/>
30 </Window>
31
ModalWindow.mxml中第11行中 click事件中只要对modalResult写值就自动关闭窗口，模仿delphi中的模态窗口。