Payday Loans Online Payday Loans Online

Todd Rothe : UI/UX Developer

it's pronounced rowth-ee

By 2g1c2 girls 1 cup

ItemRendererFunction : Two Styles in One List

Using the ItemRendererFunction on a DataGroup or SkinnableDataContainer allows you to select the appropriate item renderer for different types of data on the fly.

Here is an example using one dataProvider to display two different types of data in two different styles in one list.


Download the project to see the full source.
See the same two item renderers near the top of the script tag that were mentioned in the previous post.
import com.toddrothe.renderers.ContactsItemRenderer; // TR: item renderer
import com.toddrothe.renderers.GroupsItemRenderer; // TR: item renderer

Note the objects in the array collection used as dataProviders for the DataGroup contain different ‘type’ values – contact and group.
protected var mixedData:ArrayCollection = new ArrayCollection([{'type':'contact','id':64, 'name':'Josh Tynjala', 'image':'images/jt.png'},{'type':'group','id':0,'name':'My First Group','content':'various media'},{'type':'contact','id':140, 'name':'Peter C.', 'image':'images/pc.png'},{'type':'group','id':12,'name':'Another Group','content':'video'},{'type':'contact','id':64, 'name':'Brendan', 'image':'images/bl.png'}]);

Below that you will see the same item renderer function used in the previous post which changes the item renderer depending on the item.type value – contact and group..
protected function getItemRenderer(item:Object):IFactory // TR: item renderer func decides which item renderer to use
var myRendererClass:Class;
switch( item.type )
case "group":
myRendererClass = GroupsItemRenderer;
case "contact":
myRendererClass = ContactsItemRenderer;
return new ClassFactory( myRendererClass );

And finally the DataGroup with the itemRendererFunction and initial dataProvider value defined.
<s:DataGroup id="myDataGroup" itemRendererFunction="getItemRenderer"
dataProvider="{mixedData}" >

more posts at


No Responses to “ItemRendererFunction : Two Styles in One List” (post new)


Leave a Reply

You must be logged in to post a comment.