Skip navigation

Flex

Currently Being Moderated

Flex 4 List ItemRenderer

Mar 11, 2013 2:44 AM

Tags: #flex #list #itemrenderer

Hi,

I am trying to change the background colour of the itemrenderer based on some condition. But this doesn't seem to be working. Based on my condition, as soon as list gets loaded, current state should be 'bg' for which the colour is 'green'. But all the time, i get the background colour as 'blue' which is for normal state.

Kindly let me know if we are supposed to set the state in some other way here.... Not sure where am I going wrong

<s:List id="list" width="100%" itemRenderer="renderers.ListItemRenderer" >

<s:dataProvider>

<s:ArrayList source="{dataProvider}"/>

</s:dataProvider>

</s:List>

<?xml version="1.0" encoding="utf-8"?>

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="40"

>

<fx:Declarations>

</fx:Declarations>

<s:layout>

<s:BasicLayout />

</s:layout>

<fx:Script>

<![CDATA[

import mx.events.FlexEvent;

override public function set data(value:Object):void

{

super.data = value;

if(data.myCondition == true)

this.currentState = 'bg';}

else

this.currentState = '';

}

]]>

</fx:Script>

<s:states>

<s:State name="normal"/>

<s:State name="hovered"/>

<s:State name="selected"/>

<s:State name="bg"/>

</s:states>

<s:Rect left="0" right="0" top="0" bottom="0" width="100%" height="100%">

<s:fill>

<s:SolidColor

color.normal="blue"

color.hovered="red"

color.selected="yellow"

color.bg="green"

/>

</s:fill>

</s:Rect>

</s:ItemRenderer>

299 Views 4 Replies Latest reply: megharajdeepak, Mar 11, 2013 6:02 AM

Replies

Currently Being Moderated

1. DeanLoganBH,

Mar 11, 2013 4:47 AM in reply to megharajdeepak

Report

Try it on prepare and not set data.
override public function prepare(hasBeenRecycled:Boolean):void {

|
Mark as:
Currently Being Moderated

2. megharajdeepak,

Mar 11, 2013 5:04 AM in reply to DeanLoganBH

Report

Thanks Dean, I tried it. But I get compile time error:

|
Mark as:

Currently Being Moderated

3. DeanLoganBH,

Mar 11, 2013 5:20 AM in reply to megharajdeepak

Report

Ahhh.... prepare is in GridItemRenderer, but not in LitsItemRenderer.

Have you thought about just change the "Normal" state to the color you want, since the condition is still "Normal", but the color is different?

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer 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">
 
 <s:states>
  <s:State name="normal"/>
  <s:State name="hovered"/>
  <s:State name="selected"/>
 </s:states>
 <fx:Declarations>
  <fx:uint id="normalColor">0x0000FF</fx:uint>
  <fx:uint id="hoverColor">0xFF0000</fx:uint>
  <fx:uint id="selectedColor">0xFFFF00</fx:uint>
 </fx:Declarations>
 
 <fx:Script>
  <![CDATA[
   
   import mx.events.FlexEvent;
   
   override public function set data(value:Object):void 
   {
    super.data = value;
    
    if(data.myCondition == true) {
     normalColor = 0x00FF00;
    }
   }
   
  ]]>
  
 </fx:Script>
 <s:layout>
  <s:BasicLayout  />
 </s:layout>
 <s:Label text="{data}"/>
 <s:Rect left="0" right="0" top="0" bottom="0" width="100%" height="100%">
  <s:fill>
   <s:SolidColor  
    color.normal="normalColor"
    color.hovered="hoverColor" 
    color.selected="selectedColor"
    />
  </s:fill>
 </s:Rect>
 
</s:ItemRenderer>

|

Mark as:

Currently Being Moderated

4. megharajdeepak,

Mar 11, 2013 6:02 AM in reply to DeanLoganBH

Report

Oh Great!
That worked like charm ! Thanks

Only thing is we have to reset the colour to actual normal color if condition is not met:
override public function set data(value:Object):void
            {
                super.data = value;


                 if(data.growth < 0)
                {
                    normalColor = 0xFF0000; //normal colour is RED
                }else
                {
                    normalColor = 0x00ff00; //normal colour is GREEN
                }
            }

But i still wonder why didn't the first approach work on setting the state.

Anyway, Thanks again...

Cheers!
Deepak

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points