BackgroundColor on ItemRenderers in mx:List control

Question

We have some mx:List controls in our application and the backgroundColor on the itemRenderers has stopped working when we moved from Flex 3 to Flex 4. Is this a known issue? I have been searching high and low for any mention of this and I haven't been able to come up with anything. It seems that if I create another container inside the root container, I can set the color on that but I was wondering if there was any way to get it to work without such a large change.
I built a basic sample and it is showing the same problem:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="200" height="250">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:ArrayCollection id="testData">
            <fx:Object name="Line 1" description="Description One" color="#347FE7"/>
            <fx:Object name="Line 2" description="Description Two" color="#387fe8"/>
            <fx:Object name="Line 3" description="Description Three" color="#a437bd"/>
        </s:ArrayCollection>
    </fx:Declarations>
    <mx:List dataProvider="{testData}" width="100%" height="100%">
        <mx:itemRenderer>
            <fx:Component>
                <mx:HBox
                    backgroundColor="{data.color}"
                    backgroundAlpha="0.5"
                    mouseOver="{setStyle('backgroundAlpha', 1.0)}"
                    mouseOut="{setStyle('backgroundAlpha', 0.5)}">
                    <mx:Canvas width="16" height="16" backgroundColor="{data.color}" />
                    <mx:Text text="{data.name}"/>
                    <mx:Text text="{data.description}"/>
                </mx:HBox>
            </fx:Component>
        </mx:itemRenderer>
    </mx:List>
</s:WindowedApplication>

Answer 1

Sometimes when I need a background color or image, I just wrap my component in a BorderContainer and set the <s:Fill/> there.
It may not be as elegant as Darrell's solution, but it works for me.