自定义组件,仿panel 在左上角显示Button

最新推荐文章于 2021-11-22 21:03:22 发布

zw7534313

最新推荐文章于 2021-11-22 21:03:22 发布

阅读量675

点赞数

分类专栏： flex 文章标签： ActionScript Flash Adobe

本文链接：https://blog.csdn.net/zw7534313/article/details/83845854

版权

flex 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

在Panel右上方加Button:

(1)页面*.mxml文件：
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:container="com.core.container.*">

<container:MoreButtonPanel title="評估型KPI信息" width="100%" height="50%" layout="horizontal" stateHost="{this}" id="morePanel">
  <mx:DataGrid width="100%" height="100%" id="kpiList" selectedIndex="0"
      horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
  </mx:DataGrid>
</container:MoreButtonPanel>

<fx:Script>
//三个Button一起创建，不能识别，使用btn.addEventListener(MouseEvent.CLICK,function(){ Alert.show('11');});
/*public function buttonHandler(type:String):void{
Alert.show('btn');
}
*/

可以在MoreButtonPanel.as中的回调函数传个event参数，这样可以识别点击了哪个按钮。
public function buttonHandler(type:String,obj:Object):void{

     Alert.show(obj.toString()+"----");
     Alert.show(obj.id+"--"+obj.label);
   }

</fx:Script>

</s:TitleWindow>

(2) 上面需要使用的com.core.container.MoreButtonPanel.as文件：

package com.core.container
{
import flash.events.MouseEvent;

import mx.containers.Panel;
import mx.controls.Button;

public class MoreButtonPanel extends Panel
{
  public var type:String;
  public var _mybtn:Button;
  public var _mybtn2:Button;
  public var _mybtn3:Button;
  public var stateHost:Object;

  public function MoreButtonPanel()
  {
   super();
  }

  protected override function createChildren(): void {
   super.createChildren();
   _mybtn = new Button();
   _mybtn.height=20;
   _mybtn.width=100;
   _mybtn.label = "PE 整體信息";
   _mybtn.id = "kpiBtn";
   _mybtn.addEventListener(MouseEvent.CLICK,buttonHandler);
   this.rawChildren.addChild(_mybtn);

   _mybtn2 = new Button();
   _mybtn2.height=20;
   _mybtn2.width=110;
   _mybtn2.label = "IPVPN Backbone";
   _mybtn2.id = "kpiBtn2";
   _mybtn2.addEventListener(MouseEvent.CLICK,buttonHandler);
   this.rawChildren.addChild(_mybtn2);

   _mybtn3 = new Button();
   _mybtn3.height=20;
   _mybtn3.width=100;
   _mybtn3.label = "鏈路接口信息";
   _mybtn3.id = "kpiBtn3";
   _mybtn3.addEventListener(MouseEvent.CLICK,buttonHandler);
   this.rawChildren.addChild(_mybtn3);
  }
  protected override function layoutChrome(unscaledWidth: Number, unscaledHeight:Number):void {
   super.layoutChrome(unscaledWidth, unscaledHeight);
   _mybtn.move(this.width-_mybtn.width-23,6);               //定位
   _mybtn2.move(this.width-_mybtn.width-_mybtn2.width-23-5,6);
   //_mybtn3.move(this.width-_mybtn.width-_mybtn2.width-_mybtn3.width-23-5*2,6);
   _mybtn3.move(this.width-_mybtn.width-23,6);
  }
  private function buttonHandler(event:MouseEvent):void
  {
   if(stateHost.hasOwnProperty('buttonHandler')){
    (stateHost['buttonHandler'] as Function).call(stateHost['buttonHandler'],type);
   }
  }

  //可以传递event,如果多个按钮，根据event.target来判断点击哪个铵钮
  /*private function buttonHandler(event:MouseEvent):void
  {
   if(stateHost.hasOwnProperty('buttonHandler')){
    (stateHost['buttonHandler'] as Function).call(stateHost['buttonHandler'],type,event.target); //传递event的对象
   }
  }*/
}
}

有一个问题，在页面上如何控制三个Button的位置？

DisplayObject类及其子类中的localToGlobal () 方法和globalToLocal()方法：
//Point将 point 对象从显示对象的（本地）坐标转换为舞台（全局）坐标。
var p:Point=this.views.morePanel._mybtn.localToGlobal(new Point(this.views.morePanel._mybtn.x,this.views.morePanel._mybtn.y));

（3）Meditor:

给button增加事件的两种方法：

第一种：
//记录Type,控制三个铵钮的显示
    if(Type=="Avai"||Type=="Deli"){
     this.views.morePanel._mybtn3.visible = false;
     //this.views.morePanel._mybtn3.includeInLayout=false;
     this.views.morePanel._mybtn3.enabled=false;
     //增加事件
     this.views.morePanel._mybtn.addEventListener(MouseEvent.CLICK,function(){ Alert.show('11');});
     this.views.morePanel._mybtn2.addEventListener(MouseEvent.CLICK,function(){ Alert.show('123');});
    }
    else if(Type=="Late"){
     this.views.morePanel._mybtn.visible = false;
     //this.views.morePanel._mybtn.includeInLayout=false;
     this.views.morePanel._mybtn.enabled=false;
     //增加事件
     this.views.morePanel._mybtn2.addEventListener(MouseEvent.CLICK,function(){ Alert.show('11');});
     this.views.morePanel._mybtn3.addEventListener(MouseEvent.CLICK,function(){ Alert.show('123');});
    }

第二种： 调用MoreButtonPanel.as中命名的回调函数buttonHandler()

--------------------------------------------------------------------------

if(groupVis.numChildren>0){ // 是否有子结点
groupVis.removeAllChildren();
}

<mx:FormItem label="分組" id="groupVis" includeInLayout="false" visible="false" />

----------------------------------------------------------------------------------------------------------------------------------

78.
[Bindable]
public var totalIndexArr:ArrayCollection=new ArrayCollection();

var cc:CheckBox=view.totalIndexArr[1];
cc.selected=true;

if(grid.numChildren>0){
       grid.removeAllChildren();
      }
      var len:int=groupArr.length;
      var gridItem:GridItem;
      var gridRow:GridRow;
      var index:int=0;
      //grid.x=this.width/2;
      for(var k=0;k<len;k++){
       if (index%3 == 0)
       {
        gridRow = new GridRow();         //增加一行
        grid.addChild(gridRow);
       }
       index++;
       var c:CheckBox=new CheckBox();
       c.label=groupArr[k];
       //c.data=groupArr[k];
       //groupVis.addChild(c);
       c.height = 20;             //不设置height,width，将不显示
       c.width = 80;
       totalIndexArr.addItem(c);  //totalIndexArr 是一个ArrayCollection,它会绑定到gridRow里的checkbox
       gridItem = new GridItem();
       gridItem.addChild(c);
       gridRow.addChild(gridItem);
      }

http://hi.baidu.com/selina_1113/blog/item/589069050191f969020881d6.html

在数组(ArrayCollection)中使用[Bindable]标签时，无论是数组被替换还是数组中的元素改动，都会触发更新事件。

//选中的数
  private function selectedNum():int{
   var totalCheckBox:ArrayCollection = view.totalIndexArr;
   var k:int=0;
     var num:int=totalCheckBox.length;
   for(var i:int=0;i<num;i++){
     var c:CheckBox=totalCheckBox[i];
    if(c.selected){
     k++;
     groupNames+=c.label+",";
    }
   }
   return k;
  }