Calling an external method from a component in Flex 3

Question

I created an application to show a datagrid with a custom column in Flex 3. How can I access the method loadDetails in this code?:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
     <mx:Script>
        <![CDATA[
            public function loadDetails(id:String) : void { // Some code here 
                    }
        ]]>
    </mx:Script>
    <mx:DataGrid dataProvider="{[{id:'123456',name:'',address:''}]}">
    <mx:columns>
    <mx:DataGridColumn headerText="Serial" dataField="id"/>
        <mx:DataGridColumn headerText="Cliente" dataField="name"/>
        <mx:DataGridColumn headerText="Dirección" dataField="address"/>
        <mx:DataGridColumn width="50" dataField="id" headerText="">
            <mx:itemRenderer>
                <mx:Component>
                <mx:LinkButton label="" toolTip="Details" icon="@Embed('../resources/icons/details.png')" click="loadDetails(data.id);">
                    </mx:LinkButton>
                </mx:Component>
        </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
    </mx:DataGrid>
</mx:Application>

When I tried to run this code Flex throws an error. It says that loadDetails is not defined. I suppose that error is because of scope. But I don't have any idea about how to solve it.

Answer 1

Anything inside the Component tag will basically be a descriptor for a component factory. Therefor, anything inside that tag will be in a local scope. However, you can use the property outerDocument (if I remember correctly) to access the document where-in that itemRenderer is placed.

<mx:LinkButton label="" toolTip="Details" icon="@Embed('../resources/icons/details.png')" click="outerDocument.loadDetails(data.id);"/>

Answer 2

Or use a bubbling event to signal a listener on the form (or elsewhere) what you want to do.