flex4 对itemRenderer简单的使用产品管理―――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="application1_creationCompleteHandler(event)">
 <s:layout>
  <s:BasicLayout/>
 </s:layout>
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
  <s:HTTPService id="phoneList" url="resource/xml/phonelist.xml" result="phoneList_resultHandler(event)"/>
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   import com.spring.renderer.phoneItemRenderer;
   
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.events.FlexEvent;
   import mx.rpc.events.ResultEvent;
   
   import spark.components.supportClasses.ItemRenderer;
   import spark.events.IndexChangeEvent;
   import spark.skins.spark.DefaultComplexItemRenderer;
   [Bindable]private var phoneData:ArrayCollection;
   
   
   protected function phoneList_resultHandler(event:ResultEvent):void
   {
    phoneData=event.result.phoneList.phone;
   }

   protected function application1_creationCompleteHandler(event:FlexEvent):void
   {
    phoneList.send();
   }

   protected function dropdownlist1_changeHandler(event:IndexChangeEvent):void
   {
    switch(category.selectedIndex){
    
     case 0: showPhone.dataProvider=phoneData[0].object;break;
     case 1: showPhone.dataProvider=phoneData[1].object;break;
     case 2: showPhone.dataProvider=phoneData[2].object;break;
    
    }
   }

  ]]>
 </fx:Script>
 <s:Panel x="115" y="105" width="726" height="382" title="产品库存管理模块">
  <mx:DataGrid id="showPhone" width="100%" height="100%"  textAlign="center" rowHeight="90">
   
   <mx:columns>
    
    <mx:DataGridColumn headerText="产品名称"  itemRenderer="com.spring.renderer.nameItemRenderer"/>
    <mx:DataGridColumn headerText="产品外观" itemRenderer="com.spring.renderer.phoneItemRenderer" />
    <mx:DataGridColumn headerText="产品数量" itemRenderer="com.spring.renderer.priceItemRenderer"/>
    <mx:DataGridColumn headerText="是否进货" itemRenderer="com.spring.renderer.checkBoxRenderer"/>
    <mx:DataGridColumn headerText="提交" itemRenderer="com.spring.renderer.buttonRenderer"/>
   </mx:columns>
  </mx:DataGrid>
  <s:controlBarContent>
   <s:HGroup verticalAlign="middle" width="100%" height="24"  y="48">
    <s:Label text="请选择商品" height="15"/>
    <s:DropDownList id="category" dataProvider="{phoneData}" labelField="name" change="dropdownlist1_changeHandler(event)">
     
    </s:DropDownList>
    
   </s:HGroup>
  </s:controlBarContent>
 </s:Panel>
 
</s:Application>
 

项呈示器代码：

（1）com.spring.renderer.nameItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{data.name}" />
</s:MXDataGridItemRenderer>

（2）com.spring.renderer.phoneItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        focusEnabled="true">
 <s:layout>
  <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
 </s:layout>
 
 <mx:Image id="image" top="0" left="0" right="0" bottom="0"  source="resource/{data.path}.png">
  
 </mx:Image>
</s:MXDataGridItemRenderer>

（3）com.spring.renderer.priceItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        focusEnabled="true">
 <s:layout>
  <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
 </s:layout>
 <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{data.value}" />
</s:MXDataGridItemRenderer>

（4）com.spring.renderer.checkBoxRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        focusEnabled="true">
 <s:layout>
  <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
 </s:layout>
 <s:CheckBox>
  
 </s:CheckBox>
</s:MXDataGridItemRenderer>

（5）com.spring.renderer.buttonRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        focusEnabled="true">
 <s:layout>
  <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
 </s:layout>
 <!--<s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{dataGridListData.label}" />-->
 <s:Button top="0" left="0" right="0" bottom="0" label="提交">
  
 </s:Button>
</s:MXDataGridItemRenderer>

本文出自 “沉默书生” 博客，谢绝转载！