Flex:在PANEL的title上加一个button

本文介绍如何在Flex中自定义面板,通过覆盖createChildren方法添加按钮,并通过layoutChrome方法设置按钮位置。示例代码展示了如何创建带有最小化、最大化和关闭按钮的自定义面板。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在panel的titleBar上添加按钮,首先 override createChildren方法, 其中加入panel.rawChildren.addChild(Button),然后override panel的layoutChrome方法定置按钮的位置。
例子如下:
package{
import mx.containers.Panel;
import mx.controls.Button;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.DisplayObject;
import mx.effects.Resize;
import mx.controls.Alert;
import mx.controls.Label;

[Event(name="restore")]
[Event(name="maximize")]

public class FlexPanel extends Panel{
private var state:int = 0;

private var restoreBtn: Button;
private var minBtn: Button;
private var closeBtn: Button;

[Embed("../assets/minICON.png")] // 这里我自定义了按钮外观
private var minIcon:Class;
[Embed("../assets/minOverICON.png")]
private var minOverIcon:Class;

[Embed("../assets/restoreICON.png")]
private var restoreIcon:Class;
[Embed("../assets/restoreOverICON.png")]
private var restoreOverIcon:Class;

[Embed("../assets/closeICON.png")]
private var closeIcon:Class;
[Embed("../assets/closeOverICON.png")]
private var closeOverIcon:Class;

private var resize: Resize;
private var effectTime: Number = 400;

private static var _instance: FlexPanel;

public function FlexPanel(){
super();
_instance = this;
}

public override function initialize():void{
super.initialize();
this.maxHeight = this.height;
initEffect();
}

private function setState(state:int):void{
this.state=state;
if (state==0){
this.dispatchEvent(new Event('restore'));
} else {
this.dispatchEvent(new Event('maximize'));
}
}
/* ************************************************* */
protected override function createChildren(): void {
super.createChildren();

this.titleBar.addEventListener(MouseEvent.MOUSE_DOWN, doDrag);
this.titleBar.addEventListener(MouseEvent.MOUSE_UP, doDrop);

restoreBtn = new Button();
restoreBtn.addEventListener("click",doRestore);
restoreBtn.setStyle("overIcon",restoreOverIcon);
restoreBtn.setStyle("downIcon",restoreIcon);
restoreBtn.setStyle("upIcon",restoreIcon);
restoreBtn.visible=false;
rawChildren.addChild(restoreBtn);

minBtn = new Button();
minBtn.addEventListener("click",doMin);
minBtn.setStyle("overIcon",minOverIcon);
minBtn.setStyle("downIcon",minIcon);
minBtn.setStyle("upIcon",minIcon);
minBtn.visible = true;
rawChildren.addChild(minBtn);

closeBtn = new Button();
closeBtn.addEventListener("click",doClose);
closeBtn.setStyle("overIcon",closeOverIcon);
closeBtn.setStyle("downIcon",closeIcon);
closeBtn.setStyle("upIcon",closeIcon);
closeBtn.visible = true;
rawChildren.addChild(closeBtn);

}
/* ************************************************** */
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
}

private function doMin(event:Event):void{
setState(1);
minBtn.visible= false;
restoreBtn.visible= true;
minEffect();
//Alert.show(this.verticalScrollBar.toString());
}

private function doRestore(event:Event) :void{
setState(0);
minBtn.visible= true;
restoreBtn.visible= false;
restoreEffect();
}

private function doClose(event:Event) :void{
this.visible = false;
this.parent.removeChild(this);
}

private function doDrag(event:Event):void{
this.startDrag();
}

private function doDrop(event:Event):void{
this.stopDrag();
}
/* ********************************************************************************* */
protected override function layoutChrome(unscaledWidth: Number, unscaledHeight:Number):void {
super.layoutChrome(unscaledWidth, unscaledHeight);

var margin:int = 0;
var pixelsFromTop:int = 6;
var pixelsFromRight:int = 12;
var buttonWidth:int = 18;
var buttonHeight:int = 17;
var distance:int = 7;
var x:Number = this.width - buttonWidth*2 - distance - pixelsFromRight;
var y:Number = pixelsFromTop;

restoreBtn.setActualSize(buttonWidth, buttonHeight);
restoreBtn.move(x,y);

minBtn.setActualSize(buttonWidth, buttonHeight);
minBtn.move(x,y);

closeBtn.setActualSize(buttonWidth, buttonHeight);
closeBtn.move(this.width - buttonWidth - pixelsFromRight,y);

}
/* ********************************************************************************* */
private function initEffect():void{
resize = new Resize(_instance);
resize.heightTo = this.titleBar.height;
resize.duration = effectTime;
}

private function minEffect():void{
resize.heightTo = this.titleBar.height;
resize.end();
resize.play();
}

private function restoreEffect():void{
resize.heightTo = this.maxHeight;
resize.end();
resize.play();
}
}
}


看到这么长的代码不要觉得可怕,这是我自己用的panel,懒得简化了干脆直接把代码全帖出来,你只需要注意开带*号的地方就可以了
http://www.cnblogs.com/GFantasy/archive/2010/03/05/1678917.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值