Flex itemrenderer disable rollover but keep alternating colors

Question

Is there a way to customize the rollover and selected colors of an item renderer without losing the alternating background colors?

When i set the autoDrawBackground flag to false the roll over effects stops but for some reason the alternating background is also not drawn.

I would like to create a renderer which draws a white border on state hovered and a yellow border on selected instead of the default rollover color. I would also like to keep my alternating background colors i set on the list.

Any suggestions?

There is a property called "useRollOver". Set it to false and do not use autoDrawBackground = false, because this will cause problems. — Adrian Pirvulescu, Jun 01 '11 at 10:38
useRollOver only applies to MX components. autoDrawBackground only applies to List controls, not DataGrids. — Reado, Sep 01 '14 at 11:20

score 2 · Accepted Answer · answered Jun 01 '11 at 10:07

You could use the 'itemIndex' property of the ItemRenderer class to draw the background. For instance:

override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void 
{
    backgroundFill.color = itemIndex % 2 ? 0xff0000 : 0x00ff00;
    super.updateDisplayList(unscaledWidth, unscaledHeight);
}

would alternate between red and green rows for a background graphic like this:

<s:Rect id="background" left="0" right="0" top="0" bottom="0">
    <s:fill>
        <s:SolidColor id="backgroundFill" />
    </s:fill>
</s:Rect>

Using this technique, you could obviously do more complex things too, like gradients, alphas effects and so on.

Thanks this is what i was missing. I used you solution in combination with getStyle("alternatingItemColors") to get the colors set on the list so I dont have to store them in the renderer — Arjen vd Have, Jun 01 '11 at 10:35

score 1 · Answer 2 · answered Jun 01 '11 at 10:03

1

<s:states>
    <s:State name="normal"  />
    <s:State name="hovered"  />
    <s:State name="selected"  />
</s:states>

<s:BorderContainer backgroundColor.selected="0xA9C6EE" backgroundColor.normal="0xffffff" backgroundColor.hovered="0xCEDBEE" height="50" width="233">        

</s:BorderContainer>

I think that's what you need if i didn't misunderstand your question :)

answered Jun 01 '11 at 10:03

ophi

43
3

This is what I need indeed. The problem however is that i have to set the autoDrawBackground to false otherwise the default rollover effect will also trigger. When i set this flag to false the alternatingrowcolors i set on the list is not working anymore. I used the answer of RIAstar to get this working using the getStyle("alternatingItemColors") to feth the array of colors set on the list – Arjen vd Have Jun 01 '11 at 10:34
You can set your style whatever you want. For example `"List.blueTheme { selectionColor: #7FACF6; }`[link]http://tourdeflex.adobe.com/flex4.0/CSSTypeClassSelector/sample.html You can see detailed example how to setting style. – ophi Jun 01 '11 at 11:36

Flex itemrenderer disable rollover but keep alternating colors

2 Answers2