Question

Using flex4, I have a list with an item renderer:

<mx:List id="queueView" dataProvider="{presenter.queue.items}">
  <mx:itemRenderer>
    <fx:Component>
      <mx:VBox>
        <mx:Label text="{data.name}"/>
        <mx:Label text="{data.artist.name}"/>
      </mx:VBox>
    </fx:Component>
  </mx:itemRenderer>
</mx:List>

I have alternating colors on the list:

#queueView
{
  alternating-item-colors: red, yellow;
}

but the list items always render with a white background (it renders the colors correctly if I get rid of the renderer).

If I set contentBackgroundColor=”red” on the itemRenderer every item is red. The compiler won’t accept transparent.

How can I make the itemRenderer respect the alternating colors of the list?

Answer 1

This seems to work fine for me. Here is my code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" xmlns:components="components.*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            public var items:ArrayCollection = new ArrayCollection([{name:"foo",value:"bar"},
                                                                    {name:"foo",value:"bar"},
                                                                    {name:"foo",value:"bar"},
                                                                    {name:"foo",value:"bar"},
                                                                    {name:"foo",value:"bar"},
                                                                    {name:"foo",value:"bar"},
                                                                    {name:"foo",value:"bar"},
                                                                    {name:"foo",value:"bar"}]);

        ]]>
    </fx:Script>


    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace components "components.*";

        #queueView
        {
            alternating-item-colors: red, yellow;   
        }
    </fx:Style>

    <mx:List id="queueView" dataProvider="{items}" width="200">
        <mx:itemRenderer>
            <fx:Component>
                <mx:VBox>
                    <mx:Label text="{data.name}"/>
                    <mx:Label text="{data.value}"/>
                </mx:VBox>
            </fx:Component>
        </mx:itemRenderer>
    </mx:List>    
</s:Application>

And here is the result:

What build are you running? I am running the latest beta that came out in the last few weeks. Build 4.0.0.253292 to be exact. You can try upgrading to the latest build if you haven’t already and you can also try to clean your project. Also make sure your browser isn’t caching the swf, which sometimes happens when the file size doesn’t change dramatically.

Please let me know if I have missed something. But your code seems to work fine.