Change contentBackgroundColor of List with itemRenderer

Question

Hey there- I'm attempting to change the contentBackgroundColor of a List component depending on the content found within the dataprovider. For instance:

<s:ItemRenderer name="ir"
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    autoDrawBackground="true"
    contentBackgroundColor="{(data.location == 'home')?0x000000:0x666666}">

Unfortunately this seems to be ignored as the list just shows the default white background. Can anyone suggest a solution?

Answer 1

I would override the set data setter method and set the style there since you are guaranteed to catch every change to the data:

override public function set data(value:Object):void {
    super.data = value;
    this.setStyle("contentBackgroundColor", value.location == "home" ? 0x000000 : 0x666666);
}

Answer 2

ItemRenderer extends from Group which doesn't respect contentBackgroundColor, but rather passes it through to its elements as an inheriting style.

So contentBackgroundColor does work, but not as you are expecting, if you were to put a component that does respect contentBackgroundColor into your renderer then it will get that color, for example:

<s:List>
    <s:dataProvider>
        <s:ArrayList>
            <fx:String>0</fx:String>
        </s:ArrayList>
    </s:dataProvider>
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer contentBackgroundColor="red">
                <s:VGroup paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
                    <s:Label text="ItemRenderer {data}" />
                    <s:ComboBox />
                </s:VGroup>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>

As pointed out earlier you will probably be best off overriding the data setter and changing the color of a background Rect from there, for example:

<s:List>
    <s:dataProvider>
        <s:ArrayList>
            <fx:String>0</fx:String>
            <fx:String>1</fx:String>
        </s:ArrayList>
    </s:dataProvider>
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer>
                <fx:Script>
                    <![CDATA[
                        override public function set data(value:Object):void {
                            super.data = value;
                            if (data == null)
                                return;

                            if (data == 1){
                                c.color = 0xEEEEEE;
                            } else {
                                c.color = 0x666666;   
                            }
                        }
                    ]]>
                </fx:Script>
                <s:Rect width="100%" height="100%">
                    <s:fill>
                        <s:SolidColor id="c" />
                    </s:fill>
                </s:Rect>
                <s:Label text="ItemRenderer {data}" />
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:List>