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>

此条目发表在 Flex 分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已被标记为 *

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>