对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编器很不太爽，可能是不怎么会用，所以注释会少一点，如果有什么问题评论里就行。