Payday Loans Online Payday Loans Online

Todd Rothe : UI/UX Developer

it's pronounced rowth-ee

By 2g1c2 girls 1 cup

ItemRendererFunction : One List, Two DataProviders

Using the ItemRendererFunction on a DataGroup or SkinnableDataContainer allows you to reuse said group, selecting the appropriate item renderer for different types of data.

Here is an ItemRendererFunction example using one list to display two separate data sets in two different styles.


Download the project to see the full source.
See the two item renderers near the top of the script tag.
import com.toddrothe.renderers.ContactsItemRenderer; // TR: item renderer
import com.toddrothe.renderers.GroupsItemRenderer; // TR: item renderer

Note the two array collections used as dataProviders for the DataGroup.
protected var contactsData:ArrayCollection = new ArrayCollection([{'type':'contact','id':64, 'name':'Josh Tynjala', 'image':'images/jt.png'},{'type':'contact','id':140, 'name':'Peter C.', 'image':'images/pc.png'},{'type':'contact','id':64, 'name':'Brendan', 'image':'images/bl.png'}]);

protected var groupsData:ArrayCollection = new ArrayCollection([{'type':'group','id':0,'name':'My First Group','content':'various media'},{'type':'group','id':12,'name':'Another Group','content':'video'},{'type':'group','id':42,'name':'Nature Group','content':'nature photos'}]);

Below that you will see the actual item renderer function which changes the item renderer depending on the item.type value.
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="{contactsData}" >

more posts at


No Responses to “ItemRendererFunction : One List, Two DataProviders” (post new)


Leave a Reply

You must be logged in to post a comment.