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 全选、反选 checkBox 不是很完善,但很有借鉴意义
flex datagrid 实现合计功能控件包 带源码,demo fxp是flex4的工程文件,导入到工作空间即可 直接导入项目即可。 更多访问我的blog www.dplayer.net
flex datagrid 改变指定行的背景颜色,可直接使用
这个分页只与后台交互一次,然后将获得的集合在前台进行分页显示。
flex datagrid资料,下载的别人的,想弄点分数啊
成功的实现了,datagrid中嵌套checkbox实现全选的功能。分享代码供大家分享。项目为flex3。
NULL 博文链接:https://windmark.iteye.com/blog/1716422
flex 通过读取xml文件 实现动态DataGrid数据列表
在FLEX4中开发带有过滤功能的DATAGRID组件
flex Datagrid checkbox全选 Datagrid
FLEX的datagrid合计、平均值,很好的例子代码拿来就可以用
可以通过简单的一个标签实现一个表的checkbox功能,当然我才学了不到一个星期,可以在原来的基础上进行扩展,希望交流下我的邮箱是llaysz@163.com,如果大家把它变强大了记得给我发一份谢谢了
Flex DataGrid从XML文件中加载数据
Flex DataGrid 改变某一行的背景颜色,自定义的DataGrid组件
flex DataGrid复选框源码 flex DataGrid复选框源码 flex DataGrid复选框源码
最近用到,flex datagrid最下面加上了合计功能,源代码,下载可导入直接运行
Flex4.6 开发的关于DataGrid控件,在其中嵌套了comboBox,控制是否可航编辑,添加删除一行,光表定位,查了好些资料,可直接运行
Flex创建可编辑以及分页的DataGrid,对熟悉和使用datagrid控件是一个很好的例子。
将flex中datagrid组件中数据导出到excel表格中。思路很简单,利用as将datagrid中的数据解析出来,传到后台java服务端处理,即可保存为excel文件。
flex datagrid pagination, flex分页组件