flex button上新建弹出框以及关闭事件

原来做得流程呈现上面，弹出框需要加上关闭按钮，因为我的弹出框实现方法是

 

public function eventPerform(event:Event):void{
   var m : Model = getModel();
   var targetUI : Object = event.currentTarget;
   if(m != null){
    switch(event.type){
        case MouseEvent.CLICK:

//该button上的garden是否已经有弹出框
        var ui:UIComponent = getGraphRoot().getGarden(GardenList.TIP) as UIComponent;
        if(targetUI is UIComponent) {
         if(ui != null){
        ui.visible == true?ui.visible =false:ui.visible = true;
       }
        else{
         var ext : DisplayObject = getGraphRoot().getGarden(GardenList.TIP) as DisplayObject;
        var tempx:Number=0;
        var tempy:Number=0;
        if(ext == null) {
         ext = new ColumnTip();
         getContainer().addChild(ext);
         getGraphRoot().registerGarden(GardenList.TIP, ext);
        }
        ext.x = targetUI.x+10;
        ext.y = targetUI.y + targetUI.height+14;
        //处理信息框因边界问题显示不全的问题
                             tempx=ext.x+ext.width;
                             tempy=ext.y+ext.height;  
        calculate(ext,tempx,tempy);
        ext.visible = true;
        ui=ext as UIComponent;
         }
     }
    break;
   }
  }
  }

 

ColumnTip.mxml如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" height="200" width="400" alpha="0.8" layout="absolute" color="#FBF81C" headerHeight="0" borderThicknessLeft="0" borderThicknessTop="0" borderThicknessRight="0" borderThicknessBottom="0">
 

 <mx:Panel id="mainPanel" width="100%" height="100%" borderStyle="solid" themeColor="#052539" backgroundColor="#178FA9" layout="absolute" fontSize="12" title="{model.label}" borderColor="#812B2B" x="0" y="0" backgroundAlpha="0.9" cornerRadius="10" titleIcon="@Embed(source='images/graph/detail.gif')" alpha=".9" headerColors="[d40d0d,444444]" headerHeight="12" shadowDirection="right" >
        <mx:Label text="操作的个数：{objects.length}" x="0"/>
        <mx:Label text="{model.source.label} -> {model.target.label}" x="100" visible="{model.source != null}"/>
        <mx:DataGrid id="mainGrid" x="0" y="18" scroll="0" rowHeight="{rowHight}" height="98%" width="98%" dataProvider="{this.objects}"  backgroundColor="#C31E41" backgroundAlpha="0.5" headerColors="#3FAF3A" liveScrolling="false">
            <mx:columns>
                <mx:DataGridColumn headerText="动作名称" dataField="actionName"  visible="{model.source == null}"/>
                <mx:DataGridColumn headerText="执行人" dataField="actor"/>
                <mx:DataGridColumn  headerText="执行时间" dataField="actionTime"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Panel>

<mx:Panel>

 

首先想到的就是将ColumnTip里面的mainPanel类型改为TitleWindow，并加上属性 showCloseButton="true" close="closefunc()"，但是处理时刚开始想的是继续来触发click事件控制，但是尝试数次失败，最后从

var ui:UIComponent = getGraphRoot().getGarden(GardenList.TIP) as UIComponent;中得到灵感

 

 public function closefunc():void{
    var ui:UIComponent=this as UIComponent;
    ui.visible=false;
   }

问题解决。还有一个保持唯一性的，原来想将每一个弹出框都保存起来，当一个改变的时候，将其他的visible都改为false，可是这样的循环很复杂，而且因为是getContainer里面包含的不仅仅是弹出框类型，需要保留的内容没有保留，后来想到，其实可以分解为，每次打开一个弹出框，将前一个关闭，于是在container里面定义了一个位置变量

   //记录当前弹出窗口在container里的位置
   public var position:int=0;

 

然后写了一个方法如下：

 public function keepOne(ext:DisplayObject):void{
    var position:int=getContainer().getChildIndex(ext);
    var lastposition:int=Application.application.position;
    if(lastposition!=0&& lastposition!=position){
     getContainer().getChildAt(lastposition).visible=false;
    }
    Application.application.position=position;
  }

每次打开一个弹出框，将原来container里的position位置元素隐藏，修改container里面的position为当前框的位置,

问题解决了。

 

实际上第二个问题，原来准备定义一个ArrayCollection来保存所有的弹出框的，循环多次修改值，分解之后问题就变得清晰而且只是简单的变量修改就完成了想要的效果。