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是一款强大的数据展示组件,常用于Adobe Flex或Flash Builder等开发环境中。它能够高效地展示大量数据,并提供丰富的用户交互功能。在本场景中,我们关注的是“前台分页”这一技术。 前台分页是指在...
此外,还可以通过使用ItemEditor实现单元格编辑,或者通过使用AdvancedDataGrid组件来处理更复杂的数据展示需求。 文件列表中的`grids.mxml`可能包含了实现这个功能的代码示例。`Db2数据库操作方式.txt`可能涉及了...
在Flex开发中,数据网格(DataGrid)是用于展示大量结构化数据的常用组件。它允许用户以表格的形式查看和操作数据。当我们处理的数据需要进行分类或者分组时,Flex DataGrid 提供了表头分组的功能,这使得数据的展示...
在Flex开发中,数据网格...总结,这个Flex3示例展示了如何在DataGrid中嵌套复选框并实现全选功能,这对于构建交互式的数据管理界面至关重要。通过学习和实践,开发者可以创建更灵活、用户友好的数据操作界面。
在Flex编程中,DataGrid组件是用于展示结构化数据的强大工具。它允许用户对数据进行排序、筛选和编辑。在实际应用中,我们经常需要实现全选和反选功能,以便用户可以一次性选择或取消选择所有条目。本文将详细讨论...
Flex DataGrid是一个强大的数据展示组件,它在Adobe Flex框架中被...同时,掌握如何根据需求配置和扩展DataGrid,如添加自定义列渲染器、编辑器,以及处理数据操作的事件,将使你能够构建出功能丰富的数据展示应用。
flex datagrid 实现合计功能控件包 带源码,demo fxp是flex4的工程文件,导入到工作空间即可 直接导入项目即可。 更多访问我的blog www.dplayer.net
在Flex开发中,数据展示是常见且重要的任务之一,尤其在构建用户界面时。`DataGrid`组件是Flex提供的一种强大的工具,用于显示表格形式的数据。在这个实例中,我们将探讨如何利用Flex的`DataGrid`组件结合XML文件来...
在开发基于Adobe Flex的应用程序时,我们经常遇到需要将数据展示在用户友好的方式中,例如使用DataGrid组件。然而,有时用户希望将这些数据显示在更传统的格式中,如Microsoft Excel电子表格。本教程将详细介绍如何...
1. **DataGrid组件**:DataGrid是Flex中用于展示结构化数据的组件,它可以显示多列数据,并支持排序、选择和编辑等功能。在创建DataGrid时,我们需要指定数据源(通常是ArrayCollection或XMLListCollection)。 2. ...
在Flex开发中,Datagrid组件是用于展示数据集的一个强大工具,它允许用户以表格的形式查看和操作数据。本文将深入探讨如何在Flex的Datagrid中实现数据的合计与平均值计算,帮助开发者更好地理解和应用这些功能。 ...
在Flex4.6中,DataGrid支持两种编辑模式:cell editing(单元格编辑)和row editing(行编辑)。这个项目主要涉及后者,允许用户一次编辑整行数据。 二、ComboBox控件嵌入 ComboBox控件是一个下拉列表选择框,用户...
在Flex开发中,DataGrid组件是一个非常常用的控件,它用于展示数据集合,并提供交互式操作,如排序、选择等。本示例聚焦于DataGrid中的CheckBox集成,特别是实现一个全选的功能。以下是对这个主题的详细解释: 一、...
Flex DataGrid 分页是Adobe Flex开发中一个关键的用户界面组件功能,用于处理大量数据时提高性能和用户体验。在Web应用程序中,一次性加载所有数据可能导致页面加载缓慢,消耗大量内存,而分页则能有效地解决这个...
在Flex开发中,DataGrid控件是用于展示数据表格的常用组件,它可以高效地呈现大量结构化信息。在某些情况下,我们可能需要根据特定条件改变DataGrid中的某一行或几行的背景颜色,以突出显示或者区分不同的数据状态。...
在Flex开发中,DataGrid控件是用于展示数据集并进行交互操作的重要组件。它能够以表格形式显示数据,支持排序、筛选、编辑等...通过深入理解Flex的DataGrid和分页机制,开发者可以构建出功能丰富的数据展示和编辑界面。
在本文中,我们将深入探讨基于Adobe Flex的DataGrid组件的应用实例。Flex是一种强大的富互联网应用程序(RIA)开发框架,主要用于构建交互式、响应式的Web应用。DataGrid是Flex中的一个核心组件,它允许开发者以表格...
在需要时,DataGrid可以使用itemEditor属性指定的编辑器来编辑单元格内容。 4. **排序**:通过sortableColumns属性,用户可以点击列标题对数据进行升序或降序排序,sortIndex和sortDescending属性则用于获取或设置...