Flex:在PANEL的title上加一个button-CSDN博客

本文链接：https://blog.csdn.net/iteye_14479/article/details/81962620

在 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，懒得简化了干脆直接把代码全帖出来，你只需要注意开带*号的地方就可以了