FLEX实践：表格中添加链接，弹出窗口，复选框，按钮

由于代码比较多，在这里就不做解释了，有问题留言哈！

LovColumn.as

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

    }
}

 

Module.as

package Class
{
    public class Module
    {
        public var applicationName:String;
        public var applicationId:Number;
        public function Module()
        {
        }

    }
}

 

CarVO.as

package Class
{
    public class CarVO
    {
        public var name:String;
        public var available:Boolean;
        public var age:Number;
        public var applicationName:String;
        public var applicationId:Number;
        public function CarVO()
        {
        }

    }
}

 

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()" width="468" height="324">
<mx:Script>
<![CDATA[
    import Events.LovEvent;
    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;
      dispatchEvent(new LovEvent);
      cancel();
  }
  private function cancel():void{
      PopUpManager.removePopUp(this);
  }
]]>
</mx:Script>
    <mx:DataGrid id="dg" x="10" y="10">
       
    </mx:DataGrid>
    <mx:Button x="372" y="252" 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" creationComplete="init()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#DBFAA6, #EFFDB5]">
    <mx:states>
        <mx:State name="updateState">
            <mx:RemoveChild target="{dg}"/>
            <mx:RemoveChild target="{button1}"/>
            <mx:AddChild position="lastChild">
                <mx:Canvas x="325" y="88" width="493" height="328">
                    <mx:Label x="54" y="44" text="Car Name:"/>
                    <mx:Label x="54" y="81" text="Age:"/>
                    <mx:Label x="54" y="122" text="Availiable:"/>
                    <mx:TextInput x="151" y="42" id="carName"/>
                    <mx:TextInput x="151" y="79" id="carAge"/>
                    <mx:CheckBox x="151" y="120"  id="carAvailiable"/>
                    <mx:Button x="406" y="296" label="Update" click="update()"/>
                </mx:Canvas>
            </mx:AddChild>
        </mx:State>
    </mx:states>
<mx:Script>
<![CDATA[
    import mx.events.CollectionEvent;
    import mx.events.FlexEvent;
    import Class.LovColumn;
    import myComponent.LovComponent;
    import Class.Module;
    import Class.CarVO;
    import mx.collections.ArrayCollection;
  import mx.controls.*;
  import mx.managers.*;
 
  [Bindable]public var arr:ArrayCollection=new ArrayCollection();
  var columnArray:ArrayCollection=new ArrayCollection();
    var sourceArray:ArrayCollection=new ArrayCollection();
    [Bindable]public var resultObject:Object=new Object();
  private function init():void{
      var car1:CarVO=new CarVO();
      car1.name="Ford";
      car1.age=2;
      car1.available=false;
      car1.applicationName="AC";
      car1.applicationId=134;
      var car2:CarVO=new CarVO();
      car2.name="Buick";
      car2.age=1;
      car2.available=true;
      car2.applicationName="AB";
      car2.applicationId=135;
      var car3:CarVO=new CarVO();
      car3.name="BMW";
      car3.age=2;
      car3.available=true;
      car3.applicationName="AA";
      car3.applicationId=136;
      arr.addItem(car1);
      arr.addItem(car2);
      arr.addItem(car3);
     
      /*init lov data source array*/
      var lovColumn:LovColumn=new LovColumn();
      lovColumn.columnName="Application Name";
      lovColumn.dataField="applicationName";
     
      var lovColumn2:LovColumn=new LovColumn();
      lovColumn2.columnName="Application Id";
      lovColumn2.dataField="applicationId";
      lovColumn2.visible=true;
      columnArray.addItem(lovColumn);
      columnArray.addItem(lovColumn2);
     
      var application1:Module=new Module();
      application1.applicationId=136;
      application1.applicationName="BAbb";
      var application2:Module=new Module();
      application2.applicationId=137;
      application2.applicationName="BC";
      var application3:Module=new Module();
      application3.applicationId=138;
      application3.applicationName="BD";
      sourceArray.addItem(application1);
      sourceArray.addItem(application2);
      sourceArray.addItem(application3);
      arr.addEventListener(CollectionEvent.COLLECTION_CHANGE, show1);
  }
  private function show():void{
      Alert.show(dg.selectedItem.applicationName+"--"+dg.selectedItem.applicationId);
  }
  public function clickHandler(obj:Object):void{
      if(obj.chxBox.selected){  
                    arr.getItemAt(dg.selectedIndex).available=true;  
                }else{  
                    arr.getItemAt(dg.selectedIndex).available=false;  
                }
  }
  public function search():void{
        var lovComponent:LovComponent=LovComponent(PopUpManager.createPopUp(this,LovComponent,false));
        lovComponent.mainApp = this; 
        lovComponent.titleName="Application Search Window";
         lovComponent.columnArray=this.columnArray;
         lovComponent.sourceArray=this.sourceArray;
         lovComponent.resultObject=this.resultObject;
         lovComponent.width=500;
         lovComponent.height=400;
          lovComponent.addEventListener("LovEvent",applicationEditHandler);
         PopUpManager.centerPopUp(lovComponent);
        
    }
 private function applicationEditHandler(evt:Event):void{
     arr[dg.selectedIndex].applicationId=this.resultObject.applicationId;
     arr[dg.selectedIndex].applicationName=this.resultObject.applicationName;
     arr.refresh();
 }
 public function show1():void{
     //var car:CarVO=arr[dg.selectedIndex];
    
    
     currentState="updateState";
     carName.text=arr[dg.selectedIndex].name;
     carAge.text=arr[dg.selectedIndex].age.toString();
     carAvailiable.selected=arr[dg.selectedIndex].available;
    
 }

  public function update():void{
      Alert.show(carName.text+" has been updated.");
  }
]]>
</mx:Script>
    <mx:DataGrid x="344" y="160" width="432" height="199"  id="dg" dataProvider="{arr}" >
        <mx:columns>
             <mx:DataGridColumn  dataField="available" headerText="Available">  
                <mx:itemRenderer>  
                    <mx:Component>  
                    <mx:HBox>  
                        <mx:CheckBox id="chxBox" selected="{data.available}" click="outerDocument.clickHandler(this);"/>  
                    </mx:HBox>  
                    </mx:Component>  
                </mx:itemRenderer>  
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Name" dataField="name">  
                <mx:itemRenderer>  
                    <mx:Component>  
                        <mx:HBox>
                            <mx:LinkButton label="{data.name}" click="outerDocument.show1();"
                                textDecoration="underline" color="#2066CF" fontWeight="normal"/>
                            
                        </mx:HBox>  
                    </mx:Component>  
                </mx:itemRenderer>  
            </mx:DataGridColumn> 
            <mx:DataGridColumn headerText="Age" dataField="age"/>
            <mx:DataGridColumn headerText="Application" dataField="applicationName" editable="true">  
                <mx:itemRenderer>  
                    <mx:Component>  
                        <mx:HBox>
                            <mx:Label text="{data.applicationName}" id="applicationText" width="60%"/>
                            <mx:Button  click="outerDocument.search();" width="40%"
                                Label="..." /> 
                            
                        </mx:HBox>  
                    </mx:Component>  
                </mx:itemRenderer>  
            </mx:DataGridColumn> 
            <mx:DataGridColumn headerText="ApplicationId" dataField="applicationId" />
        </mx:columns>
    </mx:DataGrid>
    <mx:Button x="507" y="100" label="Show Application" click="show()"     id="button1"/>
   
</mx:Application>