The code you provided mixes Spark and MX Components in such a way that I would expect compiler errors. For starters, you have these issues:
- The
mx:itemRenderer
is the syntax used to define a property on a component. So, it is used to define the value for the itemRender property on thes:List
component. This will cause a compiler error because the namespaces are different. You should specifys:itemRenderer
instead. - The
mx:Component
is used to define a new in-line component. However, your namespace is wrong. With Flex 4.6 you should specify the fx namespace, not the mx namespace. - There are two components listed as children to the
mx:Component
tag, where their should only be 1. The solution in the MX world to this would be to wrap it the label and image in a container. In the Spark world, the itemRenderer must extend the ItemRenderer class. - For the text and source you are specifying string literals; not variables in your data element.
You have the right idea; but the wrong execution. Read this information on creating itemRenderers.
I would rework your code like this:
<s:List id="list1" x="0" y="108" width="320" height="355" change="list1_changeHandler(event)"
creationComplete="list1_creationCompleteHandler(event)" >
<s:AsyncListView list="{getDataResult.lastResult}"/>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer dataChange="onDataChange()">
<fx:Script>
<![CDATA[
protected function onDataChange():void{
labelDisplay.text =data.Itemname
imageDisplay.source = data.ItemImageURL
}
]]>
</fx:Script>
<s:HGroup>
<s:Label id="labelDisplay" />
<s:Image id="imageDisplay" />
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
This is untested code I wrote the browser; but it should demonstrate the correct approach. The namespaces are correct. There is a single component defined as the itemRenderer and it extends the ItemRenderer class. The displayed items should update when the itemRenderer data changes, such as when you scroll in the list. And the two items are positioned so that they do not display on top of each other.