FLEX提高篇---------DataGrid里嵌入checkBox等控件等操作

先看看效果:

 

 

整个代码其实没有什么奥妙之处,值得注意的是这一句: 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;
	}
}

 

 

 

不是很了解flex 不过从这篇文章看来
我觉得 flex似乎也是一个中间产物
以他为基础 还有很多工作可以去做啊 呵呵

看页面有点像C#.net的页面不过改了个命名空间

不错啊，嘿嘿

很好的资料，我最近正在学习Flex，这玩意确实牛！

我用的是puremvc框架。

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var topicData:ArrayCollection;

public function clickHanlder(obj:Object):void{  
                if(obj.chxBox.selected){  
                    topicData.getItemAt(dataGrid.selectedIndex).selected=true;  
                }else{  
                    topicData.getItemAt(dataGrid.selectedIndex).selected=false;  
                }  
            }
]]>
</mx:Script>
<mx:DataGrid id="dataGrid" width="100%" height="100%" dataProvider="{topicData}">
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:CheckBox id="chxBox" selected="{topicData.selected}" click="outerDocument.clickHanlder(this);"/> 
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn  headerText="title" dataField="title"/>
<mx:DataGridColumn headerText="Compare" dataField="Compare"/>
</mx:columns>
</mx:DataGrid>


这个topicData.selected没有定义 怎么办啊？ 是topiData是动态加载的

调用editHanlder时为什么前面要加outerDocument，不能直接调用吗？