Problem
Need to change itemRenderer at runtime. You can't just assign the string name of your itemRender at runtime to the component.
Solution
Need to use mx.core.ClassFactory;
Detailed explanation
I needed a nice quick and easy way to swap the itemRenderer in my List at runtime. I found that ClassFactory is what I needed.
Here are screenshots of my list with the "makeEmSmall" itemRenderer:
and with my "makeEmBig" itemRenderer:
Basically, in order to change a Flex itemRenderer at runtime, you need to cast it to a type ClassFactory. Here is the Flex mark-up:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.ClassFactory;//changes the list item renderer at runtime
private function changeRenderer(event:Event):void
{
list.itemRenderer =
if(viewType.selectedValue.toString() == "small")new ClassFactory(makeEmSmall);else
list.itemRenderer =
}
]]>
new ClassFactory(makeEmBig);</mx:Script>
<!-- List -->
variableRowHeight="
itemRenderer="
alternatingItemColors="
themeColor="
<mx:List x="34" y="92" width="300" height="300"true"makeEmSmall" id="list"[#FFFFFF, #EEEEEE]"#8C8196">
<mx:dataProvider>
<mx:String>item 1</mx:String>
<mx:String>item 2</mx:String>
<mx:String>item 3</mx:String>
<mx:String>item 4</mx:String>
<mx:String>item 5</mx:String>
<mx:String>item 6</mx:String>
<mx:String>item 7</mx:String>
<mx:String>item 8</mx:String>
<mx:String>item 9</mx:String>
<mx:String>item 10</mx:String>
</mx:dataProvider>
</mx:List>
<!-- Radio Buttons -->
<mx:RadioButtonGroup id="viewType" labelPlacement="right" change="{changeRenderer(event);}"/>
<mx:HBox x="40" y="400">
<mx:Text text="View: "></mx:Text>
<mx:RadioButton label="big" value="big" groupName="viewType" toolTip="Make 'em big dude." />
<mx:RadioButton label="small" value="small" groupName="viewType" toolTip="Make 'em small dude." selected="true"/>
</mx:Application>
</mx:HBox>
Brent Lamborn | Apple Offers
