0 Replies Latest reply on Jan 24, 2012 2:35 PM by kkudiksx

    List's ItemRenderer - setStyle does not work

    kkudiksx Level 1

      I have a List which I can drag things into each "row".

       

      Each row is rendered using an itemRenderer which is an HBox wrapping a couple of Labels and a spacer inside.

       

      I am trying to change the style of each row when I am dragging over an item to each row using the dragEnter handler.

       

      I get the renderer and I try to set the following styles:

       

      renderer.setStyle('borderColor', 'red');

      renderer.setStyle('borderStyle', 'solid');

      renderer.setStyle('borderThickness', '3');

      renderer.setStyle('borderVisible', 'true');

       

      Even though the styles get set when I debug, the styles are not shown on the screen.

       

      Any ideas why?

       

      This used to work in Flex 3.2 but now that I upgraded to Flex 4.5 it does not work.

       

      The itemRenderer is as follows - UserTaskSummary.mxml

       

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

       

      <mx:HBox xmlns:mx="library://ns.adobe.com/flex/mx"

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

               xmlns:s="library://ns.adobe.com/flex/spark">

       

       

          <fx:Script>

              <![CDATA[

              import  com.company.UserInfo;

       

       

              [Bindable]

              public var currentUser:UserInfo;

              ]]>

          </fx:Script>

       

       

          <mx:Label id="nameLabel"

                    text="{data.userInfo.fullName}"

                    fontWeight="{(this.currentUser.id == this.data.userInfo.id) ? 'bold' : 'normal' }"/>

          <mx:Spacer width="100%"/>

          <mx:Canvas

                  cornerRadius="20"

                  borderStyle="solid"

                  borderThickness="0">

              <mx:Label id="statsLabel"

                        text="{data.statistics.openItems}"

                        fontWeight="{(data.statistics.openItems > 0) ? 'bold' : 'normal' }"

                        width="100%" textAlign="center"/>

          </mx:Canvas>

          <mx:Spacer width="1"/>

      </mx:HBox>

       

       

       

      Inside the mxml where the ItemUnderReportingList is displayed:

       

              public function getRendererFactory(currentUser:UserInfo):ClassFactory {

                  var factory:ClassFactory = new ClassFactory(UserTaskSummary);

                  factory.properties = {'currentUser': currentUser};

                  return factory;

              }

       

       

          <wkflcontrols:ItemUnderReportingList id="userSelectorList"

                                               width="100%" height="100%"

                                               dataProvider="{pm.data.members}"

                                               creationComplete="pm.getQueueMembership()"

                                               change="pm.getQueueMembership(); pm.selectUser(event)"

                                               labelField="fullName"

                                               itemRenderer="{getRendererFactory(pm.data.me)}"

                                               dragEnter="pm.checkDragToUser(event)"

                                                  />

       

              private var highlightedStyle:Object =  { "borderStyle": 'solid', "borderColor": 'red', "borderThickness": '3' , "borderVisible": 'true'};

       

              public function checkDragToUser(event:DragEvent):void

              {

                  var renderer:UserTaskSummary = ItemUnderReportingList(event.target).getItemRendererUnderCursor(event) as UserTaskSummary;

                  if (renderer && this.isAllowedToDragOnUser(renderer, event.dragSource.dataForFormat("items") as Array))

                  {

                      DragManager.acceptDragDrop(UIComponent(event.target));

                      this.highlightCurrentRenderer(renderer);

                  }

              }

       

       

              private function highlightCurrentRenderer(renderer:UserTaskSummary):void

              {

                  for (var style:String in this.highlightedStyle)

                  {

                      renderer.setStyle(style, this.highlightedStyle[style]);

                  }

              }

       

                 --> declared in ItemUnderReportingList.as which extends List

              public function getItemRendererUnderCursor(event:MouseEvent):IListItemRenderer

              {

                  var pt:Point = new Point(event.stageX, event.stageY);

                  pt = super.globalToLocal(pt);

       

                  var yy:Number = 0;

       

                  var n:int = super.listItems.length;

                  for (var i:int = 0; i < n; i++)

                  {

                      if (super.listItems[i].length)

                      {

                          if (pt.y < yy + super.rowInfo[i].height)

                          {

                              var m:int = super.listItems[i].length;

                              if (m == 1)

                                  return super.listItems[i][0];

       

                              var j:int = Math.floor(pt.x / super.columnWidth);

                              return super.listItems[i][j];

                          }

                      }

                      yy += super.rowInfo[i].height;

                  }

                  return null;

              }

          }

       

       

      I've tried to include all the relevant methods that are invoked in the process, hopefully someone can spot what's happening wrong and why the style is no longer set.

       

      I don't like the way the renderer is obtained either but the getItemRendererUnderCursor works and I've tested it thoroughly as I thought it was getting the wrong itemRenderer - but it's not!