Flex:在PANEL的title上加一个button





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

 

此条目发表在 Flex 分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已被标记为 *

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>