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: