title: Spark images in spark list with TileLayout disappear on scroll and drag in Flex app
body: <p>I have a renderer that looks like this:</p>
  
  <pre><code>&lt;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"&gt;
      &lt;s:Group width="160" toolTip="{data.toolTip}" doubleClickEnabled="true"&gt;
          &lt;s:layout&gt;
              &lt;s:VerticalLayout gap="5" horizontalAlign="center"
                                paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2"/&gt;
          &lt;/s:layout&gt;
          &lt;mx:Canvas width="156" height="156" borderStyle="solid" borderColor="#AAAAAA"
                     verticalScrollPolicy="off" horizontalScrollPolicy="off"&gt;
              &lt;mx:Image id="image" source="{data.thumbnail}" width="{data.thumbwidth}" height="{data.thumbheight}"
                        horizontalCenter="0" verticalCenter="0"/&gt;
          &lt;/mx:Canvas&gt;
          &lt;s:Label text="{data.data.name}" maxDisplayedLines="2" textAlign="center" 
                   width="100%"/&gt;
      &lt;/s:Group&gt;
  &lt;/s:ItemRenderer&gt;
  </code></pre>
  
  <p>In a list that looks like this</p>
  
  <pre><code>&lt;s:List id="fileIconView"
      dataProvider="{files}"
      width="100%" height="100%"
      borderVisible="false"
      dragEnabled="true" 
      allowMultipleSelection="true" 
      doubleClickEnabled="true"
      mouseDown="fileIconViewMouseDown(event)"
      mouseMove="fileIconViewMouseMove(event)"
      mouseUp="clearSelectionRectangle()"
      change="fileSelectionChanged()"
      itemRenderer="view.ThumbnailRenderer"&gt;
      &lt;s:layout&gt;
          &lt;s:TileLayout clipAndEnableScrolling="true" /&gt;
      &lt;/s:layout&gt;
  &lt;/s:List&gt;
  </code></pre>
  
  <p>When I scroll the images in my list disappear. How do I fix this?</p>
  
  <p>The same happens when I drag one of them but I fixed that (partially) by regenerating the list when the drag is completed or cancelled.</p>
  
  <p><em>UPDATE July 11, 2011, 2:02PM EST</em>
  The data object being sent to the renderer looks like this</p>
  
  <pre><code>[Bindable]
  public class FileWrapper
  {
      /** file that wrapper holds, File, OnlineDocument and SymbolicLinks */
      public var data:*;
  
      /** file size */
      public var size:String;
  
      /** file's author */
      public var author:String;
  
      /** file's created date */
      public var date:String;
  
      /** tooltip for the file  */
      public var toolTip:String;
  
      /** image */
      public var img:String;
  
      /** thumbnail source */
      public var thumbnail:Object;
  
      /** width of thumbnail image */
      public var thumbwidth:int;
  
      /** height of thumbnail image */
      public var thumbheight:int;
  
      /** folder with mime type icons */
      public const MIME_ICONS_FOLDER:String = "fileexplorer/mimeTypeIcons/";
  
      public function FileWrapper(file:*, controller:FileExplorerController)
      {
          this.data = file;
  
          if (file is File) {
              var f:File = file as File;
              this.size = NumberUtils.humanReadableBytes(f.latestRevision.sizeOnDisk);
              this.author = f.latestRevision.author.displayName;
              this.date = NumberUtils.formatDate(f.latestRevision.timeUploaded);
              this.toolTip = f.name + "\n" +"Size: " + this.size
                  + "\n" + "Type: " + f.latestRevision.mimeType;
              this.img = MIME_ICONS_FOLDER+getMimeTypeIcon(f.latestRevision.mimeType);
  
              var self:FileWrapper = this;
              controller.getThumbnail(f.latestRevision,
                  function (tumbnailBitmap:Object):void
                  {
                      self.thumbnail = tumbnailBitmap;
                      self.thumbwidth = tumbnailBitmap.width;
                      self.thumbheight = tumbnailBitmap.height;
                  });
          }
          else if(file is OnlineDocument) {
              this.toolTip = file.name + "\nOnline Document";
              this.img = MIME_ICONS_FOLDER+"OnlineDocument.png";
          }
          else if(file is SymbolicFileLink) {
              this.toolTip = file.name + "\nShortcut";
              this.img = MIME_ICONS_FOLDER+"System-Shortcut-icon.png";
          }
          else {
              this.size = "";
              this.author = "";
              this.date = "";
              this.toolTip = "Unknown File Type";
              this.img = MIME_ICONS_FOLDER+"Unknown.png";
          }
          this.thumbnail = this.img;
          this.thumbwidth = 32;
          this.thumbheight = 32;
      }
  
      /**
       * Gets the icon image for the given mime type
       * 
       * @param mime type string
       * @return image name string
       */
      protected static function getMimeTypeIcon(mimeType:String):String
      {
          switch (mimeType) {
              case "application/msword":
                  return "File-doc.png";
              case "application/octet-stream":
                  return "System-binary.png";
              case "application/ogg":
                  return "Audio-ogg.png";
              case "application/pdf":
                  return "File-pdf.png";
              case "application/vnd.ms-excel":
                  return "File-xls.png";
              case "application/vnd.ms-powerpoint":
                  return "File-ppt.png";
              case "application/x-bzip2":
                  return "Archive-zip.png";
              case "application/x-gtar":
                  return "Archive-tar.png";
              case "application/x-gzip":
                  return "Archive-gzip.png";
              case "application/x-tar":
                  return "Archive-tar.png";
              case "application/xhtml+xml":
                  return "File-html.png";
              case "application/zip":
                  return "Archive-zip.png";
              case "audio/x-mpegurl":
                  return "Audio-mp3.png";
              case "audio/mpeg":
                  return "Audio-mp3.png";
              case "audio/x-aiff":
                  return "Audio-aiff.png";
              case "audio/x-wav":
                  return "Audio-wav.png";
              case "image/bmp":
                  return "Image-bmp.png";
              case "image/gif":
                  return "Image-gif.png";
              case "image/jpeg":
                  return "Image-jpg.png";
              case "image/png":
                  return "Image-png.png";
              case "image/tiff":
                  return "Image-bmp.png";
              case "text/html":
                  return "File-html.png";
              case "text/plain":
                  return "File-txt.png";
              case "application/vnd.oasis.opendocument.presentation":
                  return "Presentation.png";
              case "application/vnd.oasis.opendocument.spreadsheet":
                  return "Spreadsheet.png";
              case "application/vnd.oasis.opendocument.text":
              case "text/richtext":
                  return "Text.png";
              case "text/xml":
                  return "Text.png";
              case "video/mpeg":
                  return "Video-mpeg.png";
              case "video/quicktime":
                  return "Video-movie.png";
              case "video/vnd.mpegurl":
                  return "Video-mpeg.png";
              case "video/x-msvideo":
                  return "Video-avi.png";
              case "video/x-sgi-movie":
                  return "Video-movie.png";
              default:
                  return "System-default.png";
          }
      }
  }
  </code></pre>
  
  <p>The controller.getThumbnail method simply calls this model method</p>
  
  <pre><code>public function getThumbnail(revision:Revision, callBack:Function):void
  {
      // only for image revisions
      if (revision.mimeType.indexOf("image") &gt; -1) {
          var loader:Loader = new Loader();
          // create request
          var urlVars:URLVariables = new URLVariables();
          urlVars.authToken = userAccountModel.token;
          urlVars.id = revision.id;
          var req:URLRequest = new URLRequest(THUMBNAIL_URL);
          req.data = urlVars;
  
          var context:LoaderContext = new LoaderContext(true);
          loader.load(req, context);
          // set load handler
          loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
              function(event:Event):void
              {
                  callBack(event.currentTarget.content);
              });
      }
  }
  </code></pre>
  
  <p>Loading thumbnails using this method works perfectly.  The issue happens when you scroll the List.</p>