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

在Panel右上方加Button:

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

<!-- 传统的Panel 右上方标题栏，不能加Button
 <s:Panel width="100%" height="50%" title="評估型KPI信息">
  <mx:DataGrid width="100%" height="100%" id="kpiList" selectedIndex="0"
      horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
  </mx:DataGrid>
 </s:Panel>
 -->
 
<!-- 使用自定义组件，添加三个按钮，使用actionscript类构建三个Button-->
 <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;
  }

 

74、flex布局是不考虑组件是否处于可视状态。也就是说不论组件是否可视，它都会在区域中占空间。但你可以通过includeInLayout设置组件是否参与布局。要注意的是includeInLayout只影响组件是否处于容器的布局中而不影响组件是否处于可视状态。

111、在List组件中，你可以把allowMultipleSelection设为true，这样用户按着ctrl键可以选择多个项。

112、List组件中的selectedIndices/selectedItems为被选中的序号和项，它们均为Vector对像。