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>