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>

附件：http://down.51cto.com/data/2360846