itemRenderer results in undefined method

Question

I have an mxml file with a bunch of functions in the script tag, and a List component that uses a custom itemRender to add an image to each list entry. But when I add a call to a function on click of the image, I get "call to an undefined method" error. Even though my function is right there on the same page... here is what it looks like:

<mx:List x="10" y="38" width="358" height="231" id="audioPlaylist" change="playSong(event)" alternatingItemColors="[#7DC1F0, #4DAEF1]" color="#000000" labelField="title" fontSize="10" themeColor="#FFFFFF">
    <mx:itemRenderer>
        <mx:Component>
            <mx:HBox width="100%" height="20" horizontalAlign="left">
                <mx:HBox width="100%" height="100%" horizontalAlign="left">
                    <mx:Text text="{data.title}"/>
                </mx:HBox>
                <mx:HBox width="100%" height="100%" horizontalAlign="right">
                    <mx:Image id="iTunesButton" source="@Embed(source='assets/iTunes.png')" toolTip="Click to buy this song on iTunes"  click="iTunesLink(data.buyLink)"/>
                </mx:HBox>                           
            </mx:HBox>
        </mx:Component>
    </mx:itemRenderer>                                               
    </mx:List>

The function iTunesLink() is right there on the page, along with a bunch of other functions which get called no problem, but why does it return undefined?

Answer 1

Try outerDocument.iTunesLink(data.buyLink)

Answer 2

Item renderers are actually converted into separate classes, so the "this" operator refers to the component, not the containing file.

The best way to handle this is with bubbling events. Make a custom event, set bubbling to true, and dispatch it from your component. Then, in the file that contains the list, listen for that event (on the containing class!) - (you'll need to do it in actionscript unless you want to extend list and add [Event(name="myCustomEvent",type="me.MyEvent")] to the extension). Then you can call your function.

I usually define item renderers in separate files... It's easier to understand what's going on.