FLEX4实践—动态生成DataGrid及应用客户化itemRenderer

应用场景：
1）从后台取到的数据为数组类型，但数据的列名及列个数均是动态的

2）抽取到的数据中有些是DATE类型的，如果直接显示在DataGrid中默认格式很难让用户接受，希望对特殊类型的数据（如日期）进行格式转换处理



下面的例子将模拟这一场景：
数据准备：gridColumns1搭配gridProvider1，gridColumns2搭配gridProvider2；两组数据的列名及列个数均不同，其中一组数据包括DATE类型数据。



主应用：DynamicGridTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Script>
		<!--[CDATA[
			import components.DynamicGridWin;
			import mx.managers.PopUpManager;
			private function showWin1():void{
				var newWindow:DynamicGridWin=new DynamicGridWin;
				newWindow.title="Grid1";
				newWindow.gridColumns = gridColumns1;
				newWindow.gridProvider = gridProvider1;
				PopUpManager.addPopUp(newWindow, this, true);
				PopUpManager.centerPopUp(newWindow);
			}
			private function showWin2():void{
				var newWindow:DynamicGridWin=new DynamicGridWin;
				newWindow.title="Grid2";
				newWindow.gridColumns = gridColumns2;
				newWindow.gridProvider = gridProvider2;
				PopUpManager.addPopUp(newWindow, this, true);
				PopUpManager.centerPopUp(newWindow);
			}
		]]-->
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<fx:Array id="gridColumns1">
			<fx:Object colCode='Name' colType='VARCHAR2'/>
			<fx:Object colCode='Price' colType='VARCHAR2'/>
			<fx:Object colCode='StartDate' colType='DATE'/>
		</fx:Array>
		<fx:Array id="gridProvider1">
			<fx:Object Name="Apple" Price="18" StartDate="{new Date()}"/>
			<fx:Object Name="Banana" Price="10" StartDate="{new Date(2010,1,3)}"/>
		</fx:Array>
		
		<fx:Array id="gridColumns2">
			<fx:Object colCode='Name' colType='VARCHAR2'/>
			<fx:Object colCode='Class' colType='VARCHAR2'/>
		</fx:Array>
		<fx:Array id="gridProvider2">
			<fx:Object Name="Apple" Class="1"/>
			<fx:Object Name="Banana" Class="3"/>
		</fx:Array>
	</fx:Declarations>
	<s:Button x="384" y="155" label="GridWin1" click="showWin1()"/>
	<s:Button x="532" y="155" label="GridWin2" click="showWin2()"/>
	
</s:Application>

组件DynamicGridWin.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="480" height="300" showCloseButton="true"
		 close="{PopUpManager.removePopUp(this)}"
		 creationComplete="init()">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<mx:DateFormatter id="dateFormatter" formatString="YYYY-MM-DD HH:NN:SS"/>
		<fx:Component id="dateRenderer">
			<mx:Text text="{outerDocument.dateFormatter.format(data[outerDocument.gridColumns[outerDocument.index].colCode])}"/>
		</fx:Component>
	</fx:Declarations>
	<fx:Script>
		<!--[CDATA[
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.managers.PopUpManager;
			private var _gridColumns:Array;
			private var _gridProvider:Array;
			private var _index:Number;
			
			public function set gridColumns(gridColumns:Array):void{
				this._gridColumns = gridColumns;
			}
			public function get gridColumns():Array{
				return this._gridColumns;
			}
			
			public function set gridProvider(gridProvider:Array):void{
				this._gridProvider = gridProvider;
			}
			public function get gridProvider():Array{
				return _gridProvider;
			}
			
			public function set index(index:Number):void{
				this._index = index;
			}
			public function get index():Number{
				return _index;
			}
			private function init():void{
				initGrid();
				initGridData();
			}
			private function initGrid():void{
				var cols:Array=datagrid.columns;
				for (var i:int=0; i < this.gridColumns.length; i++)
				{
					index = i;
					var dgc:DataGridColumn=new DataGridColumn(gridColumns[index].colCode);
					dgc.headerText=gridColumns[index].nodeColName;
					dgc.sortable=false;
					dgc.width= 100;
					if(gridColumns[i].colType=='DATE')
						dgc.itemRenderer = dateRenderer;
					cols.push(dgc);
				}
				datagrid.columns=cols;
			}
			
			private function initGridData():void{
				this.datagrid.dataProvider = _gridProvider;
			}
		]]-->
	</fx:Script>
	<mx:DataGrid id="datagrid" width="100%" height="100%"/>
</mx:TitleWindow>

注：DynamicGridWin.mxml中的dateRenderer就是用以处理日期格式数据的格式转换，initGrid()实现动态生成表格并根据'ColType'判断是否需要添加itemRenderer进行类型转换显示。



演示效果：

GridWin1:





GridWin2: