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>