title: PopUpButton with TileList and custom renderer
body: <p>I have prepared a simple test case for a PopUpButton opening a TileList with black and red entries and it mostly works, but has 2 annoyances. </p>
  
  <p>I've searched a lot, tried several variants (added [Bindable] members in my renderer; added color member to the bids array; created my <em>public override set data()</em> method; ...) and has been getting some answers too, but they are way too general.</p>
  
  <p>I would appreciate if someone can suggest code to fix the 2 issues in my code:</p>
  
  <p>1) Scrolling "tl2" right-left doesn't work well: the entries are displayed in a mix of red and black. I know the TileList reuses itemRenderer, but how do I fix the problem?</p>
  
  <p>2) In debug-mode I get numerous warnings:
  warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher)</p>
  
  <p>Thank you,
  Alex</p>
  
  <p>MyRenderer.mxml:</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
             verticalScrollPolicy="off" horizontalScrollPolicy="off"
             width="100%" height="100%"&gt;
      &lt;mx:Script&gt;
          &lt;![CDATA[
              public static function findColor(str:String):uint {
                  return (str.indexOf('♥') != -1 ||
                      str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000;
              }
          ]]&gt;
      &lt;/mx:Script&gt;
  
      &lt;mx:Label truncateToFit="true" width="60"
                text="{data.label}" color="{findColor(data.label)}"/&gt;
  &lt;/mx:Canvas&gt;
  </code></pre>
  
  <p>MyTest.mxml:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                  creationPolicy="all" applicationComplete="init(event);"&gt;
      &lt;mx:Style&gt;
          @font-face {
              src:url("C:\\WINDOWS\\Fonts\\arial.ttf");
              fontFamily: myFont;
              unicodeRange:
                  U+0020-U+0040, /* Punctuation, Numbers */
                  U+0041-U+005A, /* Upper-Case A-Z */
                  U+005B-U+0060, /* Punctuation and Symbols */
                  U+0061-U+007A, /* Lower-Case a-z */
                  U+007B-U+007E, /* Punctuation and Symbols */
                  U+0410-U+0451, /* cyrillic */
                  U+2660-U+266B; /* card suits */
          }
          List, CheckBox, Label, Button, PopUpButton, TileList {
              fontFamily: myFont;
              fontSize: 24;
          }
      &lt;/mx:Style&gt;
  
      &lt;mx:Script&gt;
          &lt;![CDATA[
              import mx.controls.*;
              import mx.events.*;
  
              [Bindable]
              private var bids:Array;
              private var tl:TileList;
  
              private function init(event:FlexEvent):void {
                  bids = createBids();
                  pub.popUp = createList(bids);
              }
  
              private function createBids():Array {
                  var arr:Array = [{label: 'Pass'}];
                  for (var i:uint = 6; i &lt;= 10; i++)
                      for (var j:uint = 0; j &lt; 5; j++)
                          arr.unshift({label: i+'♠♣♦♥ '.charAt(j%5)});
  
                  return arr;
              }
  
              private function createList(arr:Array):TileList {
                  tl = new TileList();
                  tl.maxColumns = 5;
                  tl.width = 350;
                  tl.height = 250;
                  tl.dataProvider = arr;
                  tl.itemRenderer = new ClassFactory(MyRenderer);
                  tl.addEventListener('itemClick', itemClickHandler);
  
                  if (arr.length &gt; 0) {
                      tl.selectedIndex = arr.length - 1;
                      pub.label = arr[tl.selectedIndex].label;
                  }
  
                  return tl;
              }
  
              private function itemClickHandler(event:ListEvent):void {
                  var index:uint = tl.columnCount * event.rowIndex + event.columnIndex;
                  var label:String = bids[index].label;
                  pub.label = label;
                  pub.setStyle('color', MyRenderer.findColor(label));
                  pub.close();
                  tl.selectedIndex = index;
              }
          ]]&gt;
      &lt;/mx:Script&gt;
  
      &lt;mx:Panel title="TileList scrolling problem" height="100%" width="100%"
                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"&gt;
  
          &lt;mx:Label width="100%" color="blue" text="Select your bid:"/&gt;
  
          &lt;mx:TileList id="tl2" height="200" width="200"
                       maxColumns="5" rowHeight="30" columnWidth="60"
                       dataProvider="{bids}" itemRenderer="MyRenderer"/&gt;
      &lt;/mx:Panel&gt;
  
      &lt;mx:ApplicationControlBar width="100%"&gt;
          &lt;mx:Spacer width="100%"/&gt;
          &lt;mx:CheckBox id="auto" label="Auto:"/&gt;
          &lt;mx:Button id="left" label="&amp;lt;&amp;lt;"/&gt;
          &lt;mx:PopUpButton id="pub" width="90"/&gt;
          &lt;mx:Button id="right" label="&amp;gt;&amp;gt;"/&gt;
      &lt;/mx:ApplicationControlBar&gt;
  &lt;/mx:Application&gt;
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>Thank you Wade, the warning is gone now (I guess it was not ok to use <em>{data.label}</em> in my label), but the "tl2" still has scrolling issues.</p>
  
  <p>New MyRenderer.mxml (still has scrolling issues):</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
             verticalScrollPolicy="off" horizontalScrollPolicy="off"
             width="100%" height="100%"&gt;
      &lt;mx:Script&gt;
          &lt;![CDATA[
  
              override public function set data(value:Object):void {
                  super.data = value;
  
                  var str:String = String(value.label);
                  myLabel.text = str;
                  myLabel.setStyle('color', findColor(str));
              }
  
              public static function findColor(str:String):uint {
                  return (str.indexOf('♥') != -1 ||
                      str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000;
              }
          ]]&gt;
      &lt;/mx:Script&gt;
  
      &lt;mx:Label id="myLabel" truncateToFit="true" width="60"/&gt;
  &lt;/mx:Canvas&gt;
  </code></pre>