Working alternating 2 color renderer. Should give you a headstart:
oddColor and evenColor are defined in css file. You can justg hardcode them in
here. In took out data code and labels, left the skeleton ...
<?xml version="1.0" encoding="utf-8"?>
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%"
height="40"
autoDrawBackground="true"
useHandCursor="true"
buttonMode="true"
click="onItemClick(event)">
<fx:Script>
<![CDATA[
/**
* Override the data setter to get the alert description
* and set the proper background color for the renderer
*
* @override
* @param value Object the incoming message data
* @return none
*/
override public function set data(value:Object):void
{
super.data = value;
invalidateProperties();
invalidateDisplayList();
}
/**
* Override the commit properties
* to be able to display it on many lines
*
* @param none
* @return none
*/
override protected function commitProperties():void
{
super.commitProperties();
/* if (data)
{
//perform work on the data if any
}
*/ }
/**
* Override the update display lis to displat correct background
and
splitted text
*
* @override
* @unscaledWidth Number
* unscaledHeight Number
* @return none
*/
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
//set background color
if ((itemIndex % 2) == 0)
{
odd.visible = false;
even.visible = true;
}
else
{
odd.visible = true;
even.visible = false;
}
//put data into the view controls
}
private function onItemClick(event:MouseEvent):void
{
//dispatch event if necessary
}
]]>
</fx:Script>
<s:Rect id="odd" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color="{getStyle('oddColor')}"></s:SolidColor>
</s:fill>
</s:Rect>
<s:Rect id="even" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color="{getStyle('evenColor')}"></s:SolidColor>
</s:fill>
</s:Rect>
------drop your data here
</s:ItemRenderer>
C
________________________________
From: Stephen <[email protected]>
To: [email protected]
Sent: Sun, August 29, 2010 3:34:23 PM
Subject: [flexcoders] Overriding Item Background In ItemRenderer Problem.
I can change the Label color but cant change the background color, its anying.
Can anybody suggest a solution.
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
trace(value);
if (value == "Option 7")
{
labelDisplay.setStyle("color","#FFFFFF");
//bgRect.left = 10;
}
else
{
labelDisplay.setStyle("color","#000000");
//bgRect.left = 0;
}
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Rect id="bgRect"
includeIn="normal,hovered,selected"
left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor
color = "#8080FF"
color.selected="#404080"
color.hovered="#5050A0"/>
</s:fill>
</s:Rect>
<s:Label id="labelDisplay"
color="black"
color.hovered="red"
color.selected="white"
left="3" right="3" top="4" bottom="3"/>
</s:ItemRenderer>
