3 Replies Latest reply on Sep 17, 2009 12:16 AM by derryDev

    Custom ItemRenderer in TileList

    derryDev

      Hi,

       

      I am trying to implement an itemrenderer for a tilelist which is bound to an array as a dataprovider. The array is changed to provide a new list of items for the itemrenderer. When i change the data the tilelist renders these but only over the top of the previously rendered items. I am using this approach to define a custom legend for a chart.

       

      DATA:

       

      [Bindable] public var defaultLegend:Array =
                  [
                        {0:"x",1:"#FFFF00"},

                        {0:"y",1:"#00FF00"},

                        {0:"z",1:"#FF0000"}
                  ];

       

      CALL:

       

      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off" verticalScrollPolicy="off"
          dataChange="tlLegend.initialize();tlLegend.invalidateList();tlLegend.invalidateDisplayLis t();tlLegend.validateNow();tlLegend.validateDisplayList();">
          <mx:Script>
              <![CDATA[
                  [Bindable] public var dataProvider:Object;
                  ]]>
          </mx:Script>
          <mx:TileList dataProvider="{dataProvider}" width="100%" id="tlLegend" cachePolicy="off" dataChange="tlLegend.initialize();tlLegend.invalidateList();tlLegend.invalidateDisplayLis t();tlLegend.validateNow();tlLegend.validateDisplayList();">       
              <mx:itemRenderer>views.itemrenderers.myLegendRenderer</mx:itemRenderer>
          </mx:TileList>
      </mx:Canvas>

       

      myLegendRenderer AS FOLLOWS:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();" width="50" height="25" dataChange="init();">
          <mx:Script>
              <![CDATA[
                  import mx.utils.StringUtil;
                  import mx.controls.Label;
                 
                  private function init():void{   
                      var colorValue:String = data[1];
                      var colorString:String = "0x" + colorValue.substr(1,(colorValue.length - 1));                       
                      var myColour:uint = uint(colorString);               
                      var circle:Sprite = new Sprite();
                      circle.graphics.lineStyle(0.2, 0x000000, 1.0);
                      circle.graphics.beginFill(myColour, 0.7);
                      circle.graphics.drawCircle(0,8,6);
                      circle.graphics.endFill();
                      var label:Label = new Label();
                      label.width = 50;
                      label.text = data[0];               
                      label.truncateToFit = true;
                      label.addChild(circle);
                      addChild(label);
                  }
              ]]>
          </mx:Script>
      </mx:Canvas>

       

      Any help as to why this renders over the top each time would be greatly appreciated...

      legendIssue.png

      Regards,

       

      Me