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 <sd_br...@ntlworld.com> To: flexcoders@yahoogroups.com 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>