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

2023-05-25 21:05:33 实践 生成 客户

应用场景：
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>

相关文章