Using DataRenderer to add custom states to a spark List renderer

ItemRenderer has logic built in that changes between some standard states like normal, hovered, selected, etc. You can supplement this logic by overriding ItemRenderer.getCurrentRendererState(), or do away with the built in states altogether by subclassing DataRenderer instead of ItemRenderer.

DataRenderer is a simple class that extends Group and implements IDataRenderer. ItemRenderer extends DataRenderer and adds some useful functionality including managing the state of the renderer, drawing the background color, and adding properties like itemIndex.

The following example demonstrates a List that uses an item renderer that subclasses DataRenderer. Clicking on the radio buttons will change between the three states. Notice that the state doesn’t change when you hover over the renderer. Change DataRenderer to ItemRenderer and recompile to compare the difference in behavior when hovering over renderers.

View Source

This renderer saves the value of currentState into the data item and then restores that value in the set data method. This is needed to make the renderer capable of handling a virtual layout (the default in a spark List).

Note: This sample requires Flex SDK or higher. You can get the latest SDK builds from

5 thoughts on “Using DataRenderer to add custom states to a spark List renderer”

  1. Great example. I am really enjoying these small little examples that you have been writing up. I always learn something new. Keep it up.

  2. FYI – It will be easier to use ItemRenderer instead of DataRenderer in many cases in the Flex Hero release due to the fix for SDK-29061.

Comments are closed.