Flex:在PANEL的title下加一个button
在
panel的titleBar上添加按钮，首先 override createChildren方法,
其中加入panel.rawChildren.addChild(Button)，然后override
panel的layoutChrome方法定置按钮的位置。
例子如下：
001 package{
002 import mx.containers.Panel;
003 import mx.controls.Button;
004 import flash.events.Event;
005 import flash.events.MouseEvent;
006 import flash.display.DisplayObject;
007 import mx.effects.Resize;
008 import mx.controls.Alert;
009 import mx.controls.Label;
010
011 [Event(name="restore")]
012 [Event(name="maximize")]
013
014 public class FlexPanel extends Panel{
015 private var state:int = 0;
016
017 private var restoreBtn: Button;
018 private var minBtn: Button;
019 private var closeBtn: Button;
020
021 [Embed("../assets/minICON.png")] // 这里我自定义了按钮外观
022 private var minIcon:Class;
023 [Embed("../assets/minOverICON.png")]
024 private var minOverIcon:Class;
025
026 [Embed("../assets/restoreICON.png")]
027 private var restoreIcon:Class;
028 [Embed("../assets/restoreOverICON.png")]
029 private var restoreOverIcon:Class;
030
031 [Embed("../assets/closeICON.png")]
032 private var closeIcon:Class;
033 [Embed("../assets/closeOverICON.png")]
034 private var closeOverIcon:Class;
035
036 private var resize: Resize;
037 private var effectTime: Number = 400;
038
039 private static var _instance: FlexPanel;
040
041 public function FlexPanel(){
042 super();
043 _instance = this;
044 }
045
046 public override function initialize():void{
047 super.initialize();
048 this.maxHeight = this.height;
049 initEffect();
050 }
051
052 private function setState(state:int):void{
053 this.state=state;
054 if (state==0){
055 this.dispatchEvent(new Event('restore'));
056 } else {
057 this.dispatchEvent(new Event('maximize'));
058 }
059 }
060 /* ************************************************* */
061 protected override function createChildren(): void {
062 super.createChildren();
063
064 this.titleBar.addEventListener(MouseEvent.MOUSE_DOWN, doDrag);
065 this.titleBar.addEventListener(MouseEvent.MOUSE_UP, doDrop);
066
067 restoreBtn = new Button();
068 restoreBtn.addEventListener("click",doRestore);
069 restoreBtn.setStyle("overIcon",restoreOverIcon);
070 restoreBtn.setStyle("downIcon",restoreIcon);
071 restoreBtn.setStyle("upIcon",restoreIcon);
072 restoreBtn.visible=false;
073 rawChildren.addChild(restoreBtn);
074
075 minBtn = new Button();
076 minBtn.addEventListener("click",doMin);
077 minBtn.setStyle("overIcon",minOverIcon);
078 minBtn.setStyle("downIcon",minIcon);
079 minBtn.setStyle("upIcon",minIcon);
080 minBtn.visible = true;
081 rawChildren.addChild(minBtn);
082
083 closeBtn = new Button();
084 closeBtn.addEventListener("click",doClose);
085 closeBtn.setStyle("overIcon",closeOverIcon);
086 closeBtn.setStyle("downIcon",closeIcon);
087 closeBtn.setStyle("upIcon",closeIcon);
088 closeBtn.visible = true;
089 rawChildren.addChild(closeBtn);
090
091 }
092 /* ************************************************** */
093 protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
094 super.updateDisplayList(unscaledWidth, unscaledHeight);
095 }
096
097 private function doMin(event:Event):void{
098 setState(1);
099 minBtn.visible= false;
100 restoreBtn.visible= true;
101 minEffect();
102 //Alert.show(this.verticalScrollBar.toString());
103 }
104
105 private function doRestore(event:Event) :void{
106 setState(0);
107 minBtn.visible= true;
108 restoreBtn.visible= false;
109 restoreEffect();
110 }
111
112 private function doClose(event:Event) :void{
113 this.visible = false;
114 this.parent.removeChild(this);
115 }
116
117 private function doDrag(event:Event):void{
118 this.startDrag();
119 }
120
121 private function doDrop(event:Event):void{
122 this.stopDrag();
123 }
124 /* ********************************************************************************* */
125 protected override function layoutChrome(unscaledWidth: Number, unscaledHeight:Number):void {
126 super.layoutChrome(unscaledWidth, unscaledHeight);
127
128 var margin:int = 0;
129 var pixelsFromTop:int = 6;
130 var pixelsFromRight:int = 12;
131 var buttonWidth:int = 18;
132 var buttonHeight:int = 17;
133 var distance:int = 7;
134 var x:Number = this.width - buttonWidth*2 - distance - pixelsFromRight;
135 var y:Number = pixelsFromTop;
136
137 restoreBtn.setActualSize(buttonWidth, buttonHeight);
138 restoreBtn.move(x,y);
139
140 minBtn.setActualSize(buttonWidth, buttonHeight);
141 minBtn.move(x,y);
142
143 closeBtn.setActualSize(buttonWidth, buttonHeight);
144 closeBtn.move(this.width - buttonWidth - pixelsFromRight,y);
145
146 }
147 /* ********************************************************************************* */
148 private function initEffect():void{
149 resize = new Resize(_instance);
150 resize.heightTo = this.titleBar.height;
151 resize.duration = effectTime;
152 }
153
154 private function minEffect():void{
155 resize.heightTo = this.titleBar.height;
156 resize.end();
157 resize.play();
158 }
159
160 private function restoreEffect():void{
161 resize.heightTo = this.maxHeight;
162 resize.end();
163 resize.play();
164 }
165 }
166 }
看到这么长的代码不要觉得可怕，这是我自己用的panel，懒得简化了干脆直接把代码全帖出来，你只需要注意开带*号的地方就可以了