FLEX学习日记（四） DataGrid

<?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"
			   creationComplete="employee_Service.send()">
	
	<!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
	
	<fx:Declarations>
		
		<s:HTTPService id="employee_Service"
					   url="data/employees.xml"
					   result="employeeDataArray=employee_Service.lastResult.employees.employee"/>
		
		<s:DateTimeFormatter id="dateFormat_Service"
							 dateTimePattern="d-MMM-yy"/>
		
	</fx:Declarations>
	
	<!-- Scripts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var employeeDataArray:ArrayCollection;
			
			
			private function employeeName_Function(item:Object,column:GridColumn):String
			{
				return item.firstName + " " + item.lastName;
			}
			
			private function dateFormat_Function(item:Object,column:GridColumn):String
			{
				return dateFormat_Service.format(item.hireDate);
			}
			
		]]>
	</fx:Script>
	
	<!-- UI Compnoents ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
	
	<s:DataGrid dataProvider="{employeeDataArray}"
				alternatingRowColors="[#FFFFFF,#CCCCCC]">
		
		<!--typicalItem:以 DataItem中指定项为模板来设定DataGrid的宽度-->
		<s:typicalItem>
			
			<s:DataItem firstName="Christopher"
						lastName="Winchester"
						hireDate="12/31/2011"/>
			
		</s:typicalItem>
		
		<s:columns>
			<s:ArrayList>
				
				<s:GridColumn  labelFunction="employeeName_Function"
							   headerText="Name"/>
				
				<s:GridColumn headerText="Hire Date"
							  labelFunction="dateFormat_Function"/>
				
			</s:ArrayList>
		</s:columns>
		
	</s:DataGrid>	
	
	
	
</s:Application>