FLEX实践：自定义弹出窗口与主页面的交互（仿造EBS的LOV窗口）

自定义类LovColumn.as

package Class
{
    public class LovColumn
    {
        public var columnName:String;
        public var dataField:String;
        public var visible:Boolean=true;
        public function LovColumn()
        {
        }

    }
}

 

自定义组件：LovComponent.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    showCloseButton="true"  
    close="cancel()"
    borderColor="#C6D7F5"
    themeColor="#009DFF"
    cornerRadius="10"
    creationComplete="init()">
<mx:Script>
<![CDATA[
    import Class.CarVO;
    import Class.LovColumn;
    import mx.collections.ArrayCollection;
    import mx.controls.dataGridClasses.DataGridColumn;
    import mx.managers.*;
    import mx.controls.*;
   
    public var titleName:String;
    public var columnArray:ArrayCollection=new ArrayCollection();
    public var sourceArray:ArrayCollection=new ArrayCollection();
    [Bindable]public var resultObject:Object=new Object();
    [Bindable]public var mainApp:Object = null; 
  private function init():void{
  
      this.title=titleName;

      for(var i:Number=0;i<columnArray.length;i++){
          var column:DataGridColumn= new DataGridColumn();
          column.headerText = columnArray[i].columnName;
          column.dataField  =columnArray[i].dataField;
          column.visible=columnArray[i].visible;
          dg.columns=dg.columns.concat(column);
      }
    dg.dataProvider=sourceArray;
  }
 
  private function submit():void{
      resultObject=sourceArray[dg.selectedIndex];
      mainApp.resultObject=this.resultObject;
      cancel();
  }
  private function cancel():void{
      PopUpManager.removePopUp(this);
  }
]]>
</mx:Script>
    <mx:DataGrid id="dg" x="10" y="10">
       
    </mx:DataGrid>
    <mx:Button x="359" y="250" label="Submit" click="submit()"/>
   
</mx:TitleWindow>

 

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13"
    backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#EAFCD1, #C9D6FE]" creationComplete="init()">
   
    <mx:Script>
    <![CDATA[
        import myComponent.LovComponent;
    import Class.CarVO;
    import Class.LovColumn;
    import mx.collections.ArrayCollection;
    import mx.managers.*;
    import mx.controls.*;
   
    var columnArray:ArrayCollection=new ArrayCollection();
    var sourceArray:ArrayCollection=new ArrayCollection();
    [Bindable]public var resultObject:Object=new Object();
    private function init():void{
    var lovColumn:LovColumn=new LovColumn();
      lovColumn.columnName="Car Name";
      lovColumn.dataField="name";
     
      var lovColumn2:LovColumn=new LovColumn();
      lovColumn2.columnName="Aviliable";
      lovColumn2.dataField="available";
      lovColumn2.visible=false;
      columnArray.addItem(lovColumn);
      columnArray.addItem(lovColumn2);
     
      var car:CarVO=new CarVO();
      car.name="Ford";
      car.available=true;
      var car1:CarVO=new CarVO();
      car1.name="Nissa";
      car1.available=true;
      var car2:CarVO=new CarVO();
      car2.name="BUICK";
      car2.available=false;
      sourceArray.addItem(car);
      sourceArray.addItem(car1);
      sourceArray.addItem(car2);
    }
   
    private function search():void{
        var lovComponent:LovComponent=LovComponent(PopUpManager.createPopUp(this,LovComponent,false));
        lovComponent.mainApp = this; 
        lovComponent.titleName="Car Search Window";
         lovComponent.columnArray=this.columnArray;
         lovComponent.sourceArray=this.sourceArray;
         lovComponent.resultObject=this.resultObject;
         lovComponent.width=500;
         lovComponent.height=400;
         PopUpManager.centerPopUp(lovComponent);
        
    }

    ]]>
    </mx:Script>
    <mx:Label x="385" y="124" text="Result:"/>
    <mx:TextInput x="459" y="122" id="carName" text="{resultObject.name}"/>
    <mx:Button x="618" y="122" label="..." width="43" click="search()" cornerRadius="5" fillAlphas="[1.0, 1.0]" fillColors="[#FCF2D8, #F7F9FC]"/>
   
</mx:Application>

 

运行结果：