flex datagrid doubleclick实例

最新推荐文章于 2023-02-07 11:40:11 发布

fansy1990

最新推荐文章于 2023-02-07 11:40:11 发布

阅读量2.6k

点赞数

分类专栏： flex 文章标签： flex datagrid

本文链接：https://blog.csdn.net/fansy1990/article/details/16886229

版权

flex 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍如何在FlashBuilder 3.6环境中，使用Flex DataGrid组件实现双击选中行触发事件。项目源码可在CSDN下载。当双击DataGrid中的某行，如file11，相关信息会显示在右侧textarea。主要涉及在DataManager.mxml和DataManager_script.as中设置监听和处理方法。

摘要由CSDN通过智能技术生成

flashbuilder sdk：3.6；jdk：1.7,；tomcat：7；myeclipse：10.0

项目可以在http://download.csdn.net/detail/fansy1990/6594065下载。

这篇分析的是flex中的datagrid选择其中的一行数据后，双击触发调用事件。（在调用事件中首先要获得所选择行的数据，然后根据这个数据进行处理），先看下整体界面吧：

（访问路径：http://localhost:8080/FlexServer1.1/flex/DataManager.html）

双击datagrid中的 file11这一行，然后在右边的textarea框里面就会出现相关的信息；

看主界面：DataManager.mxml:

<mx:Panel width="700" height="300" x="200" y="100">
		<mx:HBox width="100%" height="100%" >
			<mx:VBox width="100%" height="100%">
				<mx:TextArea id ="filesInfoId" height="100%" width="100%" text="{filesInfo}" />
				<component:MyDataGrid id ="mydata" myData="{myData}"  width="100%" height="100%"/>
			</mx:VBox>
			
			<mx:VBox width="100%" height="100%">
				<mx:TextArea id ="fileInfoId" height="100%" width="100%" text="{fileInfo}" />
			</mx:VBox>
		</mx:HBox>
	</mx:Panel>

这里的datagrid是自定义的，继承自DataGrid，MyDataGrid的定义如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml" dataProvider="{myData}" doubleClickEnabled="true">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			[Bindable]
			public var myData:ArrayCollection= null;
		]]>
	</mx:Script>
	<mx:columns>
		<mx:DataGridColumn headerText="文件列表" dataField="file"/>
		<mx:DataGridColumn headerText="文件大小" dataField="size"/>
	</mx:columns>
	
	
</mx:DataGrid>

这里只要注意下设置 doubleClickEnable属性为true就可以了；

最后就是设置监听，以及监听处理方法了：

在DataManager_script.as 文件中有DataManager.mxml初始化的方法：

public function initial():void{
	myData=new ArrayCollection([
		{file:"file1",size:"20M"},
		{file:"file2",size:"200M"},
		{file:"file3",size:"10M"},
		{file:"file11",size:"20M"},
		{file:"file21",size:"30M"},
		{file:"file31",size:"40M"}
		
	]);
	mydata.myData=this.myData;
	
	mydata.doubleClickEnabled=true;
	// 使用ListEvent的ITEM_DOUBLE_CLICK来监听事件
	mydata.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, double_click);
}

最后一句就是添加mydata的监听的程序了，这里建议使用ListEvent的ITEM_DOUBLE_CLICK来接受event事件；看double_click的处理过程：

public function double_click(event:ListEvent):void{
	
	if(event.target == null || event.target.selectedItem == null) {
		return;
	}
	/*
		这里要特别注意两点：
		1. 前面使用ListEvent监听；
		2. 这里使用event.currentTarget.selectedItem.*来接收相应的行的数据,其中的*对应DataGrid dataField
	*/
	var info:String ="文件名称:"+event.currentTarget.selectedItem.file+"\n"
		+"文件大小:"+event.currentTarget.selectedItem.size;
	fileInfoId.text=info;
	
}

这里获得所选行的数据要特别注意：event.currentTarget.selectedItem.*来接收相应的行的数据,其中的*对应DataGrid dataField。

分享，成长，快乐

转载请注明blog地址：http://blog.csdn.net/fansy1990