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>