`
glsjay
  • 浏览: 10974 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

对itemrenderer的一些认知(3)-itemeditor

阅读更多
   这篇就讲一下itemrenderer的兄弟itemeditor,因为要在DataGrid里的好几列显示用不同的components来修改数据,如果一上来全用itemrenderer当然可以做,但不太好看也太heavy了,所以用itemeditor来一起用就爽多了。之前对itemeditor的用法没有深究,原因是一直觉得他没什么不一样,后来仔细看了看,发现他还是很强大的,让我更愿意用他了。

   首先,itemrenderer相对更固定,写好什么就是什么,adobe的本意应该也就是用他来显示,当然你也可以直接用control类的component,但就heavy了。itemeditor就更加灵活,是可动态编辑的的renderer,当你点击某个cell的时候,会触发itemEditBeginning/itemEditBeginevent这种cell editing events,这样就可以listen之后在方法中去编辑这个cell,比如直接更改data,把当前的Text换成ComboBox,这些特性就是我们想要的。

   对于两者的区别大家可以参考:
   http://www.adobe.com/devnet/flex/articles/itemeditors_pt1.html
   http://blog.csdn.net/cfhacker007/article/details/5784505
   http://hongweiwang1984.blog.163.com/blog/static/2726776200958104047426/, 我觉得写的还不错.

   另外一点区别是itemrenderer的显示最好用labelFunction调整,而itemeditor就是不存在显示问题,因为本来就是编辑的区域,这里就不细说了,之前只用itemrenderer时搞了搞,有兴趣的同学可以自己看看。

   两者在一起用是最好的,这样会更好看也效率也有保证。

   下面例子就是两者一起用的,先用一个DataGridItemRenderer作为itemrenderer显示plain数据,当点击时,用itemeditor显示出一个Combobox或TextArea用于更改数据:
public class LinkageIPPDataGrid extends DataGrid
	{
		public function LinkageIPPDataGrid(){
			super();
			this.rowHeight = 42;
			this.setStyle("verticalAlign", "middle");
			//听ITEM_EDIT_BEGINNING和ITEM_EDIT_END					
			this.addEventListener(DataGridEvent.ITEM_EDIT_BEGINNING,
 						 this.handleItemEditBegin);		
			this.addEventListener(DataGridEvent.ITEM_EDIT_END,
 						 this.handleEditEnd);
		}
		
		override protected function createChildren():void{
			super.createChildren();	
			//一定要设为true才能编辑
			this.editable = true;
		}
		
		public function handleItemEditBegin(pEvent:DataGridEvent):void{	
			var selectedColumnIndex:int = pEvent.columnIndex;
			var selectedRowIndex:int = pEvent.rowIndex;
			var selectedColumn:DataGridColumn;
			var renderComponent:ClassFactory;
			
			//如果是第3列则显示出ComboBox
			if(selectedColumnIndex == 2){
				renderComponent = new ClassFactory(ComboBox);
				selectedColumn = this.columns[selectedColumnIndex];
				//这里就是转化itemEditor		
				selectedColumn.itemEditor = renderComponent;
			}
			//如果是第4列则显示出TextArea
			if(selectedColumnIndex == 3){
				renderComponent = new ClassFactory(TextArea);    //
				selectedColumn = this.columns[selectedColumnIndex];
				//这里就是转化为itemEditor 
				selectedColumn.itemEditor = renderComponent;
			}
		}	
		
		private function handleEditEnd(pEvent:DataGridEvent):void{
			var editor:*=DataGrid(pEvent.currentTarget).itemEditorInstance;
			if(pEvent.reason == DataGridEventReason.CANCELLED){
				return;
			}
			//如果输入为空则提示
			if(editor is TextArea){
				if(TextInput(editor).text.length==0){
					pEvent.preventDefault();
					TextInput(editor).errorString="Please Enter a valid value";
				}	
			}else if(editor is ComboBox){
					return;
				}
			}
		}
		public function createDataGridColumn():void{
			dataGridCollection = this.dataProvider as ArrayCollection;
			var columns:Array = [];
			var dataGridColumn:DataGridColumn = new DataGridColumn();
			var colunmIndex:int;
			while(colunmIndex < 4){
				dataGridColumn = new DataGridColumn();
				dataGridColumn.headerText = colunmIndex.toString();
				

				if(colunmIndex == 2){
					dataGridColumn.dataField = "iAC";
					//先把本列的itemRenderer设为自己写的EditRenderer(继承于
					//DataGridItemRenderer),其实是一个UITextField用于显示
					var pItemRender:ClassFactory = new ClassFactory(EditRenderer);
					pItemRender.properties = {datafieldname:"selectIAC"};
					dataGridColumn.itemRenderer =  pItemRender;
					dataGridColumn.sortable = false;
				}else if(colunmIndex == 3){
					dataGridColumn.editorUsesEnterKey = true;
					dataGridColumn.dataField = "comments";
					var cItemRender:ClassFactory = new ClassFactory(EditRenderer);
					cItemRender.properties = {datafieldname:"typedComments"};
					dataGridColumn.itemRenderer = cItemRender;
					dataGridColumn.sortable = false;
				}else{
					dataGridColumn.dataField = "name";  // dataField
					dataGridColumn.editable = false;
					dataGridColumn.wordWrap = true;
				}
				columns.push(dataGridColumn);
			}			
			this.columns = columns;		
		}
}


   这个EditRenderer是这样写的:
public class EditRenderer extends DataGridItemRenderer
	{
		public var datafieldname:String;		
		private var bgColor :uint = 0xffffff;
		
		public function EditRenderer(){
			super();
		}
		
		override public function set data(value:Object):void {
			super.data = value;
			if(value){
				var curval:* = value[datafieldname];
				this.bgColor = 0xffffff;
				if(curval != ""){
					this.bgColor = 0x363636;
					this.background=true;
				}else{
					this.bgColor = 0xffffff;
					this.background = false;
				}
			}
		}
		
		override public function validateNow():void{
        	super.validateNow();
        	this.backgroundColor = bgColor;
        }
	}

   这样就好了,当前的datagrid显示的就跟普通时一样,但当点击了第3或4列的一格后,就会相应的用Combobox或TextArea加载进来,这时就可以编辑了,通过这样的方式,不仅能使datagrid显示的更精简也更美观而且也保证了运行里的效率。

   总是觉得ItEye编器很不太爽,可能是不怎么会用,所以注释会少一点,如果有什么问题评论里就行。
1
4
分享到:
评论

相关推荐

    flex itemRenderer深入学习--flex相册例子

    本篇文章将深入探讨如何利用ItemRenderer实现一个灵活且功能丰富的相册示例,同时也会涉及Flex中的一些核心概念和编程技巧。 首先,我们需要了解ItemRenderer的基本结构。ItemRenderer是ActionScript类,通常继承自...

    Flex itemEditor详解

    ### Flex中的ItemEditor详解 #### 一、引言 ...在接下来的文章中,我们将继续探讨更多关于`itemEditor`的高级主题,包括复杂的编辑逻辑、验证机制以及如何利用`itemRenderer`作为`itemEditor`等。

    Flex itemRenderer的详细教程

    ### Flex ItemRenderer 的详细教程 #### 一、ItemRenderer 概述 在 Flex 开发中,ItemRenderer 是一种非常强大的工具,它允许开发者自定义列表(List)、数据网格(DataGrid)等控件中每一项的外观和行为。通过 ...

    Flex 定制ItemRender详细解释

    - 创建一个新ActionScript类,继承自mx.controls.listClasses.ItemRenderer(对于Flex 3和4 MX组件)或s:ItemRenderer(对于Flex 4 Spark组件)。 - 在类中定义视图元素,如Label、Button等,并将数据绑定到这些...

    理解_Flex_itemRenderer.pdf

    在Flex中,itemRenderer是一个非常重要的概念,它允许开发者对列表、数据网格、树等数据组件的显示方式进行定制。 在本文中,将首先介绍内联itemRenderer的概念和使用方法,然后探讨itemRenderer的设计目的和Flex...

    flex4做的itemrenderer呈现器

    在Flex4中,ItemRenderer是一种强大的工具,用于自定义数据Grid、List或其他数据绑定组件中的项显示方式。本文将深入探讨如何使用Flex4创建一个ItemRenderer,以实现类似雅虎聊天界面的效果,并介绍相关的核心概念和...

    itemrenderer help

    ItemRenderer允许用户对列表每一行或单元格的内容进行完全控制,从而开发出更吸引人、更具创意且实用的应用程序。 #### 二、ItemRenderer的基本概念 **1. ItemRenderer的作用** ItemRenderer是一个自定义的显示...

    内渲染器_ItemRenderer

    内渲染器(ItemRenderer)是Flex、Flash Builder或者ActionScript等富互联网应用程序开发中的一个重要概念,主要用于自定义组件列表项的显示方式。在基于Adobe Flex的项目中,它允许开发者根据需要为数据列表(如...

    flex中的渲染器(itemrenderer)

    flex中经常会使用到渲染器,这里简要介绍一下渲染器的一些知识

    Flex手机项目自定义List的ItemRenderer

    在Flex手机项目开发中,创建自定义的List组件ItemRenderer是一项常见的需求,目的是为了提供更加丰富和个性化的显示效果。本文将深入探讨如何利用IconItemRenderer来实现这一目标,同时结合具体的实例,介绍两种不同...

    Flex教程DataGrid归类.pdf

    6. 编辑器与渲染器(itemEditor/itemRenderer) - itemEditor属性用于指定在DataGrid中编辑数据时使用的控件,例如输入框、下拉列表等。 - itemRenderer属性用于定义如何渲染DataGrid中的每一项,这对于自定义数据...

    flex itemRenderer 渲染机制的概念和使用

    要创建一个itemRenderer,首先需要创建一个新的MXML或AS3类,该类继承自Flex的UIComponent或其他组件类,比如Canvas或Label。然后在类中定义并实现如何根据数据对象来构建和更新界面元素。 2. **注册itemRenderer*...

    itemRenderer 提前加载问题

    3. **虚拟化**:使用数据虚拟化技术,只渲染可视区域内的ItemRenderer,超出屏幕范围的则不进行渲染。 4. **优化渲染过程**:精简ItemRenderer的构造函数和初始化过程,减少内部资源的加载和计算。 5. **使用池...

    Flex项呈示器ItemRenderer

    3. **数据绑定**:通过`data`属性,我们将ItemRenderer与数据源关联起来。使用`&lt;s:Label text="{data.username}" /&gt;`这样的语句,可以将数据对象的`username`属性值绑定到Label的文本上。 4. **覆盖`...

    Flex中itemRenderer的使用简介

    Flex提供了一些默认的ItemRenderer,但通常我们会根据项目需求创建自定义的ItemRenderer。 创建自定义ItemRenderer通常涉及以下几个步骤: 1. **创建新的MXML或ActionScript类**: 创建一个新的MXML文件,例如`...

    理解 Flex_itemRenderer

    ### 理解 Flex_itemRenderer #### 一、Flex_itemRenderer 概述 Flex_itemRenderer 是 Flex 框架中的一个重要概念,它主要用于定义列表、数据网格等控件中的每一项是如何呈现的。通过自定义 itemRenderer,开发者...

    DataGrid的itemRenderer and HeaderRenderer

    在Flex和Adobe AIR开发中,`DataGrid`控件是一种常用的数据展示组件,它能够以表格形式展示数据集合。...在实际开发中,要确保对`itemRenderer`和`headerRenderer`的定制既满足业务需求,又保持良好的性能和用户体验。

    Flex ItemRenderer

    3. **覆盖`updateDisplayList()`方法**: 这是ItemRenderer生命周期的关键方法,用于设置组件的大小和位置,以及绘制和布局UI元素。在这里,你可以根据数据项的属性来调整UI元素的样式。 4. **应用ItemRenderer**: ...

    Flex内联itemRenderer

    Flex内联itemRenderer是Adobe Flex框架中的一种技术,用于自定义列表或数据网格组件中项的显示方式。在Flex开发中,我们经常会遇到需要个性化显示数据的情况,比如在一个列表中,我们希望每条数据不仅仅是一个简单的...

    ItemRenderer的用法

    3. **继承自基类**:通常,`ItemRenderer`会继承自`mx.controls.listClasses.ListBaseItemRenderer`(MX)或`s:ItemRenderer`(Spark)基类,根据项目需求选择合适的框架。 **使用步骤**: 1. **创建渲染器类**:在...

Global site tag (gtag.js) - Google Analytics