Skip navigation
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>

        <!-- Place non-visual elements (e.g., services, value objects) here -->

    </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>

 
Replies
  • Currently Being Moderated
    Mar 11, 2013 4:47 AM   in reply to megharajdeepak

    Try it on prepare and not set data.

    
    override public function prepare(hasBeenRecycled:Boolean):void {
    
    
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2013 5:20 AM   in reply to megharajdeepak

    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:

More Like This

  • Retrieving data ...

Bookmarked By (0)

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