0 Replies Latest reply on Sep 13, 2011 12:23 PM by endlessmind_jeff

    ItemRenderer states not working as expected

    endlessmind_jeff

      I have the following item renderer that is supposed to change the background color, and some text in a label of the Item when hovered over.

      However, nothing happens when the item is hovered over.

       

      Here is the item render code

       

      <?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"
      width="100%" height="95" implements="mx.core.IDataRenderer"  autoDrawBackground="false" creationComplete="initUsing(event)" >
      <fx:Script>
          <![CDATA[
             
              import mx.core.UIComponent;
              import mx.events.ResizeEvent;
             
              private var _data:Object;
         
             
              public function initUsing(event:Event):void {

       

                 
                  this.addElement(roundedMask);

       

              }
             
              private function imageResize(event:ResizeEvent):void {
                 
                  var w:Number = event.currentTarget.width;
                  var h:Number = event.currentTarget.height;
                 
                  trace("width: " + w + " height: " + h);
                  var cornerRadius:uint = 20;
                  roundedMask.graphics.clear();
                  roundedMask.graphics.beginFill(0xFF0000);
                  roundedMask.graphics.drawRoundRect(
                      10, 10, //: Im not sure why this works
                      w, h,
                      cornerRadius,
                      cornerRadius);
                  roundedMask.graphics.endFill();
                  rowSquare.mask = roundedMask;

       

              }
             
             
              [Bindable]
              override public function get data():Object {
                  return _data;
              }
         
              override public function set data(value:Object):void {
                  _data = value;
              }
              private var roundedMask:UIComponent = new UIComponent();

       

          ]]>
      </fx:Script>
         
          <s:states>
              <s:State name="normal"/>
              <s:State name="hovered"/>
              <s:State name="selected"/>
          </s:states>
         
          <s:Rect id="background" alpha="1.0" left="1" top="1" right="1" bottom="1">
              <s:fill>
                  <s:SolidColor id="bgFill" color.normal="0xFFFFFF" color.selected="0xFF000" color.hovered="0xFF0000"/>
              </s:fill>
          </s:Rect>

       

         
          <s:Image id="rowSquare" x="10" y="10" width="40"  resize="imageResize(event)" height="40" backgroundColor="#ff6666"/>
          <s:Label x="58" y="17" width="331" text="PATIENT - {data.firstName} , {data.lastName}"/>
          <s:Label left="58" right="10" top="36" bottom="36" fontSize="16"
                   text="{data.creationDate}"/>
          <s:Label left="58" top="56" text.hovered="TIME" text.normal="DURATION"/>
          <s:Scroller right="150" top="20">
          <s:DataGroup fontSize="11" dataProvider="{data.invitees}" itemRenderer="spark.skins.spark.DefaultItemRenderer">
              <s:layout>
                  <s:VerticalLayout paddingTop="1" paddingBottom="1" variableRowHeight="false" verticalAlign="top" gap="0"/>
              </s:layout>
          </s:DataGroup>
          </s:Scroller>
         
         
      </s:ItemRenderer>