IDE:Flash Builder4.6
在開始之前先看一個例子,在使用<mx:DataGrid>類似標籤時以下ItemRender的用法是可行的:
<mx:DataGrid>
<mx:columns>
<mx:DataGridColumn dataField="dataField1" headerText="姓名">
<mx:itemRenderer>
<mx:Component>
<mx:Label text="HA"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
現在把類似寫法移植到4.6中:
<s:GridColumn dataField="dataField1" headerText="姓名">
<s:itemRenderer>
<fx:Component>
<s:Label text="HA"/>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
運行時報錯:TypeError: Error #1009: Cannot access a property or method of a null object reference.
於是將寫法改爲:
主應用(GridItemRender.mxml)
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- 將非可視元素(例如服務、值對象)放在此處 -->
</fx:Declarations>
<s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<s:Panel width="80%" height="70%" title="ItemRender">
<s:DataGrid x="82" y="32" width="80%" height="70%" requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="dataField1" headerText="姓名"></s:GridColumn>
<s:GridColumn dataField="dataField2" headerText="語文"></s:GridColumn>
<s:GridColumn dataField="dataField3" headerText="數學"></s:GridColumn>
<s:GridColumn dataField="dataField4" headerText=" " itemRenderer="com.itemRender.imageRender"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:ArrayList>
<fx:Object dataField1="Sam" dataField2="89" dataField3="80" dataField4="assets/wrong.gif"></fx:Object>
<fx:Object dataField1="Jack" dataField2="88" dataField3="100" dataField4="assets/right.gif"></fx:Object>
<fx:Object dataField1="Tom" dataField2="92" dataField3="80" dataField4="assets/wrong.gif"></fx:Object>
<fx:Object dataField1="Kate" dataField2="98" dataField3="79" dataField4="assets/wrong.gif"></fx:Object>
</s:ArrayList>
</s:DataGrid>
</s:Panel>
</s:VGroup>
</s:WindowedApplication>
MXML組件(imageRender.mxml)
注意:
代碼:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- 將非可視元素(例如服務、值對象)放在此處 -->
</fx:Declarations>
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:Image source="{data.dataField4}"/>
</s:GridItemRenderer>
運行結果正常顯示: