Question

I have a custom item renderer which displays a different gif in the row depending on data value from the data object. When i set the image source url using the absolute path and not embedding it works fine however when i embed the images i find that when i scroll up and down the grid the images get messed up and sometimes sit on top of each other.

Does anyone have any ideas on why embedding images in my hbox item renderer is causing so hassle;

code

public var equipment:Image;
public var compr_icons:Bitmap = new AssetManager.COMPUTER_ICON;

.. do some logic
equipment.addChild(compr_icons);

Answer 1

In your item renderer, try overriding the data setter (which gets called implicitly by the SDK for each item in your dataProvider as you navigate through whichever data-bound control you happen to be using), and setting the image’s source property from there, like so:

<mx:List dataProvider="{yourDataSource}">
    <mx:itemRenderer>
        <mx:Component>
            <mx:HBox>

                <mx:Script>
                    <![CDATA[

                        override public function set data(value:Object):void
                        {
                            super.data = value;

                            // Set your values here (value contains your data item)
                            myImage.source = value.yourImageSourceInstance;
                            myLabel.text = value.yourLabelText;
                        }

                    ]]>
                </mx:Script>

                <mx:Image id="myImage" />
                <mx:Label id="myLabel" />

            </mx:HBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:List>

… and see if that helps. Flex is probably trying to reuse the visual elements of the renderer, not realizing your intention is to swap them out as your data changes. By taking action then (when the data item gets set), you’re able to control more explicitly what happens with the visual elements of the renderer.

Hope that helps!