Flex - Tilelist with first item as Button and all others as Image

Question

i need help with something I need a TileList that have in its first position/item a button and in all other items a image for each. Well, after having problems with Plastic theme and s:List (a problem with the scroller s List) i gave up and started working with TileList. I am using a custom item Renderer for the TileList. It is pretty simple but i think I'm doing something wrong.

The dataProvider for the TileList in an ArrayCollection composed by a String class first item, and all others are a custom class that extends Image Class. like: arr=["bt",Image,Image.....];

I don't no why but my TileList display the correct button in its first item, but after that it displays more 2 item images, then a fourth item with the right image but with a button, and it is a pattern....after 3 right items the next comes with a button....

my custom ItemRenderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"

     horizontalAlign="center"
     verticalAlign="middle"
     creationComplete="init()">
<mx:Script>
    <![CDATA[
        import mx.controls.Button;
    protected function init():void
    {
        if(this.data == "bt")
        {
            var bt:Button = new Button();
            bt.id = "btEnviar";
            bt.width=84;
            bt.height=28;
            bt.label = "Enviar Fotos"; 
            addElement(bt);

        }

    }
    ]]>
</mx:Script>
<mx:Image id="img" source = "{data}"/>

i really appreciate if someone could help...i didn't found nothing about it on the internet.

thanks!

Answer 1

Seems like a virtual layout issue. This means renderer are reused. If they are not reinitialised (ex : remove your bt element) things like this can happen. Also, I suggest you override public function data(value:Object):void and put your code in there. You can also disable virtual layout if you really want to (useVirtualLayout = false on your DataGroup/List).

I don't have much time to explain it at the moment, but I suggest you look into the itemRendererFunction property of a DataGroup. This function returns a ClassFactory defining the type of item renderer to use depending on the data.

Here's a link on this from Adobe references : Working with item renderers. See the "Using an item renderer function with a Spark container" section.