3 Replies Latest reply on Apr 22, 2011 10:54 AM by UbuntuPenguin

    BackgroundColor on ItemRenderers in mx:List control

    OsmanU Level 1

      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>