先看看效果:
整个代码其实没有什么奥妙之处,值得注意的是这一句: click="outerDocument.editHanlder();
贴一下代码段:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" backgroundColor="black">
<mx:Style>
global{
font-size:12;
}
</mx:Style>
<mx:Script>
<![CDATA[
import com.myevent.UserEvent;
import mx.managers.PopUpManager;
import com.component.EditWindow;
import com.component.User;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
[Bindable]
private var ac:ArrayCollection=new ArrayCollection([{id:0,name:'张三',selected:true},{id:1,name:'李四',selected:false},{id:2,name:'王五',selected:false}]);
private function deleteHanlder():void{
for(var i:int=0;i<ac.length;i++){
if(i<0) break;
if(ac.getItemAt(i).selected){
ac.removeItemAt(i);
ac.refresh();
i--;
}
}
}
public function clickHanlder(obj:Object):void{
if(obj.chxBox.selected){
ac.getItemAt(userDg.selectedIndex).selected=true;
}else{
ac.getItemAt(userDg.selectedIndex).selected=false;
}
}
public function editHanlder():void{
var ew:EditWindow=new EditWindow();
var user:User=new User();
user.initUser(userDg.selectedItem.id,userDg.selectedItem.name);
ew.user=user;
ew.addEventListener(UserEvent.USEREDITE,userEditHandler);
PopUpManager.addPopUp(ew,this,true);
PopUpManager.centerPopUp(ew);
}
public function userEditHandler(e:UserEvent):void{
ac.getItemAt(userDg.selectedIndex).id=e.user.id;
ac.getItemAt(userDg.selectedIndex).name=e.user.name;
ac.refresh();
}
]]>
</mx:Script>
<mx:DataGrid id="userDg" dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn dataField="id" headerText="操作">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:CheckBox id="chxBox" selected="{data.selected}" click="outerDocument.clickHanlder(this);"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="id" headerText="编号"/>
<mx:DataGridColumn dataField="name" headerText="姓名"/>
<mx:DataGridColumn headerText="修改">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Button label="编辑" click="outerDocument.editHanlder();"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Button label="删除" click="deleteHanlder();" enabled="{ac.length>0}"/>
</mx:Application>
下面是弹出窗口:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
width="400"
height="300"
showCloseButton="true"
styleName="titleWin"
close="PopUpManager.removePopUp(this);">
<mx:Style>
.titleWin{
closeButtonUpSkin:Embed(source="btn.swf",symbol="btn");
closeButtonDownSkin:Embed(source="btn.swf",symbol="btn");
closeButtonOverSkin:Embed(source="btn.swf",symbol="btn");
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManagerChildList;
import mx.utils.StringUtil;
import com.myevent.UserEvent;
import mx.managers.PopUpManager;
[Bindable]
public var user:User;
private function subEdit():void{
user.id=parseInt(StringUtil.trim(userId.text));
user.name=StringUtil.trim(userName.text);
var e:UserEvent=new UserEvent(UserEvent.USEREDITE,user);
dispatchEvent(e);
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Form>
<mx:FormItem label="编号:">
<mx:TextInput id="userId" text="{user.id}" restrict="0-9"/>
</mx:FormItem>
<mx:FormItem label="姓名:">
<mx:TextInput id="userName" text="{user.name}"/>
</mx:FormItem>
<mx:FormItem>
<mx:Button label="确定" click="subEdit()"/>
</mx:FormItem>
</mx:Form>
</mx:TitleWindow>
下面是自定义的一个事件:用来处理数据传递:
package com.myevent
{
import com.component.User;
import flash.events.Event;
public class UserEvent extends Event
{
public static const USEREDITE:String="useredit";
public var user:User;
public function UserEvent(type:String,user:User)
{
this.user=user;
super(type);
}
override public function clone():Event{
var e:UserEvent=new UserEvent(USEREDITE,user);
return e;
}
}
}
下面一个VO或者MODEL来进行数据的封装:
package com.component
{
[Bindable]
public class User
{
public function User()
{
super();
}
public function initUser(id:int=0,name:String="",age:Number=0):void{
this.id=id;
this.name=name;
this.age=age;
}
public var id:int=0;
public var name:String="";
public var age:Number=0;
}
}