`

Flex DataGrid 构建自己的编辑器(itemEditor)

    博客分类:
  • Flex
阅读更多

1、首先了解编辑器和渲染器的区别,拿DataGrid来说:


渲染器:也就是当你给DataGrid的dataProvider赋值后,DataGrid用什么形式或者说怎么来显示数据,例如:用什么字体,字体什么颜色等等。DataGrid默认的渲染器是DataGridItemRenderer,他使用文本来显示item。


编辑器:要编辑DataGrid首先制定DataGrid本身是可编辑的(通过editable指定),然后可以指定某一列是否可编辑。编辑器是指当你要修改DataGrid中item的数据,也就是双击时DataGrid决定通过什么方式来编辑,例如:提供给你个ComboBox选择,还是直接提供给你TextInput让你输入,默认的是TextInput。


     再次提一下整个显示、编辑流程:


     1》通过提供dataProvider,dataGrid使用渲染器来显示数据

     2》你通过双击item(前提是指定可编辑),进入编辑状态,dataGrid使用默认的TextInput或者你自定义的编辑器来供你编辑

     3》编辑完成,或者当前column失去焦点时,编辑状态变成渲染状态,渲染器渲染(显示)默认TextInput的text或者你定义的editor,并显示你在editor自定义并且在dataGrid中通过editorDataField指定的属性


2、要建立自己的编辑器,需要实现IDropInListItemRenderer接口


 implements="mx.controls.listClasses.IDropInListItemRenderer" 


并且要在你自定义的类中提供一个公有的变量来保存新的数据,也就是你在自定义的editor 中编辑以后你要把新的值赋给这个变量,以便item失去焦点时渲染器能获取并且显示这个变量的值,然后在DataGrid的Column中通过editorDataField属性指定这个变量,默认的变量是"text",因为默认的编辑器是TextInput,他通过text属性传递新值。



<mx:DataGridColumn headerText="姓名" dataField="Name" editorDataField="value"
									   itemEditor="com.google.myEditor"/>

 3、定义编辑器


      com.google.myEditor


<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 implements="mx.controls.listClasses.IDropInListItemRenderer" 
		 creationComplete="group1_creationCompleteHandler(event)"
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>

	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			import mx.events.ListEvent;
			
			public var dp:ArrayCollection = new ArrayCollection([{ID:"20111118",Name:"jack"},
																 {ID:"20111117",Name:"tom"}],
																 {ID:"20111116",Name:"harry"}); //模拟的dataProvider
			
			public var value:String; //保存新值
			
			private var _listData:DataGridListData;  //接口的方法,必须实现
			
			[Bindable("dataChange")]
			public function get listData():BaseListData
			{
				
				return _listData;
			}
			
			
			public function set listData(value:BaseListData):void
			{
				
				_listData = DataGridListData(value);
				
				
			}
			
			
			protected function cmb_text_changeHandler(event:ListEvent):void  //当cmb发生change事件时,把新值赋给value
			{

				value = cmb_text.selectedItem.Name;     //例如selectedItem有label属性
			}
			
			

			protected function group1_creationCompleteHandler(event:FlexEvent):void  //这个是如果你原来有值,初始化cmb默认选中
			{
				// TODO Auto-generated method stub
				
				value = data.Name; //把原来的值,也就是你dataGrid的dataField
				
				for(var i:int=0;i<dp.length;i++)
				{
					if(value == dp.getItemAt(i).Name)
					{
						cmb_text.selectedIndex = i;
						cmb_text.dispatchEvent(new ListEvent(ListEvent.CHANGE));
						break;
					}
				}
				
			}

		]]>
	</fx:Script>
	
	
	<mx:ComboBox id="cmb_text" width="100%" change="cmb_text_changeHandler(event)"  dataProvider="{dp}"/>
</s:Group>

 


分享到:
评论

相关推荐

    flex datagrid 前台 分页

    Flex DataGrid是一款强大的数据展示组件,常用于Adobe Flex或Flash Builder等开发环境中。它能够高效地展示大量数据,并提供丰富的用户交互功能。在本场景中,我们关注的是“前台分页”这一技术。 前台分页是指在...

    Flex Datagrid checkbox实现

    此外,还可以通过使用ItemEditor实现单元格编辑,或者通过使用AdvancedDataGrid组件来处理更复杂的数据展示需求。 文件列表中的`grids.mxml`可能包含了实现这个功能的代码示例。`Db2数据库操作方式.txt`可能涉及了...

    flex DataGrid 表头分组

    在Flex开发中,数据网格(DataGrid)是用于展示大量结构化数据的常用组件。它允许用户以表格的形式查看和操作数据。当我们处理的数据需要进行分类或者分组时,Flex DataGrid 提供了表头分组的功能,这使得数据的展示...

    flex datagrid 嵌套checkbox实现全选

    在Flex开发中,数据网格...总结,这个Flex3示例展示了如何在DataGrid中嵌套复选框并实现全选功能,这对于构建交互式的数据管理界面至关重要。通过学习和实践,开发者可以创建更灵活、用户友好的数据操作界面。

    Flex dataGrid 全选、反选

    在Flex编程中,DataGrid组件是用于展示结构化数据的强大工具。它允许用户对数据进行排序、筛选和编辑。在实际应用中,我们经常需要实现全选和反选功能,以便用户可以一次性选择或取消选择所有条目。本文将详细讨论...

    flex datagrid

    Flex DataGrid是一个强大的数据展示组件,它在Adobe Flex框架中被...同时,掌握如何根据需求配置和扩展DataGrid,如添加自定义列渲染器、编辑器,以及处理数据操作的事件,将使你能够构建出功能丰富的数据展示应用。

    flex datagrid 实现合计功能控件包

    flex datagrid 实现合计功能控件包 带源码,demo fxp是flex4的工程文件,导入到工作空间即可 直接导入项目即可。 更多访问我的blog www.dplayer.net

    flex DataGrid xml 动态数据列表实例

    在Flex开发中,数据展示是常见且重要的任务之一,尤其在构建用户界面时。`DataGrid`组件是Flex提供的一种强大的工具,用于显示表格形式的数据。在这个实例中,我们将探讨如何利用Flex的`DataGrid`组件结合XML文件来...

    将Flex DataGrid数据导出到Excel中

    在开发基于Adobe Flex的应用程序时,我们经常遇到需要将数据展示在用户友好的方式中,例如使用DataGrid组件。然而,有时用户希望将这些数据显示在更传统的格式中,如Microsoft Excel电子表格。本教程将详细介绍如何...

    flex datagrid 表格 合计

    1. **DataGrid组件**:DataGrid是Flex中用于展示结构化数据的组件,它可以显示多列数据,并支持排序、选择和编辑等功能。在创建DataGrid时,我们需要指定数据源(通常是ArrayCollection或XMLListCollection)。 2. ...

    FLEX的datagrid合计、平均值

    在Flex开发中,Datagrid组件是用于展示数据集的一个强大工具,它允许用户以表格的形式查看和操作数据。本文将深入探讨如何在Flex的Datagrid中实现数据的合计与平均值计算,帮助开发者更好地理解和应用这些功能。 ...

    Flex4 DataGrid控件行编辑项目

    在Flex4.6中,DataGrid支持两种编辑模式:cell editing(单元格编辑)和row editing(行编辑)。这个项目主要涉及后者,允许用户一次编辑整行数据。 二、ComboBox控件嵌入 ComboBox控件是一个下拉列表选择框,用户...

    Flex DataGrid CheckBox 一个简单的全选

    在Flex开发中,DataGrid组件是一个非常常用的控件,它用于展示数据集合,并提供交互式操作,如排序、选择等。本示例聚焦于DataGrid中的CheckBox集成,特别是实现一个全选的功能。以下是对这个主题的详细解释: 一、...

    Flex DataGrid 分页

    Flex DataGrid 分页是Adobe Flex开发中一个关键的用户界面组件功能,用于处理大量数据时提高性能和用户体验。在Web应用程序中,一次性加载所有数据可能导致页面加载缓慢,消耗大量内存,而分页则能有效地解决这个...

    flex DataGrid改变指定行的背景颜色

    在Flex开发中,DataGrid控件是用于展示数据表格的常用组件,它可以高效地呈现大量结构化信息。在某些情况下,我们可能需要根据特定条件改变DataGrid中的某一行或几行的背景颜色,以突出显示或者区分不同的数据状态。...

    Flex创建可编辑以及分页的DataGrid

    在Flex开发中,DataGrid控件是用于展示数据集并进行交互操作的重要组件。它能够以表格形式显示数据,支持排序、筛选、编辑等...通过深入理解Flex的DataGrid和分页机制,开发者可以构建出功能丰富的数据展示和编辑界面。

    FLEX datagrid应用实例

    在本文中,我们将深入探讨基于Adobe Flex的DataGrid组件的应用实例。Flex是一种强大的富互联网应用程序(RIA)开发框架,主要用于构建交互式、响应式的Web应用。DataGrid是Flex中的一个核心组件,它允许开发者以表格...

    Flex DataGrid组件 使用详解

    在需要时,DataGrid可以使用itemEditor属性指定的编辑器来编辑单元格内容。 4. **排序**:通过sortableColumns属性,用户可以点击列标题对数据进行升序或降序排序,sortIndex和sortDescending属性则用于获取或设置...

Global site tag (gtag.js) - Google Analytics