4 Replies Latest reply on Jul 19, 2006 4:46 PM by jtan

    Tree Cell Renderer

    egnar
      is there anyone who knows or can point me to some explanation on how to place a background image inside the tree??

      i'm trying to place different images for in behind the text and icons for each state, open and close.

      any info would be appreciated.


      thanks...
        • 1. Re: Tree Cell Renderer
          bnambooz
          I think you are refering to the following styles:

          folderOpenIcon
          folderClosedIcon
          disclosureOpenIcon
          discloreClosedIcon
          ...

          You can set them by embedding an image:

          <mx:Tree disclosureOpenIcon="@Embed('smallUpSkin.jpg')">

          HTH,
          Belinda
          • 2. Re: Tree Cell Renderer
            egnar Level 1
            no, i'm sorry if i wasn't clear enough.

            i am referring to the background color in each row in the tree. i want to replace the solid (or gradient) background with an image, that will cover the whole row and and lay behind the text and icons. Also, i need to switch that background image depending on the state of the row, if it's open or closed.

            i hope that's more clear,

            Thanks!!
            • 3. Re: Tree Cell Renderer
              egnar Level 1
              here's a link to a .jpg showing the tree look that i'm trying to reach.

              http://insite.initiactive.com/tree.jpg

              any input would be helpful.

              cheers.
              • 4. Re: Tree Cell Renderer
                jtan
                You will need to specify an itemRenderer for your tree. Probably the easiest thing to do is to create an Actionscript itemRenderer that extends the current TreeItemRenderer. In your renderer, you can override the updateDisplayList function to allow for a background image depending on your data.

                Here is a skeleton of what your itemRenderer might look like:

                package
                {

                import mx.controls.treeClasses.*;
                import mx.collections.*;

                public class MyTreeItemRenderer extends TreeItemRenderer
                {

                public function MyTreeItemRenderer()
                {
                super();
                }

                override protected function updateDisplayList(unscaledWidth:Number,
                unscaledHeight:Number):void
                {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                if(super.data)
                {
                //Add your code here to add an image to the background of this item
                }
                }

                }

                }