Calling a clickHandler from inside an ItemRenderer component(image)

I'm using a Datagrid which has an itemRenderer that contains an image :

protected static function hbox1_clickHandler(event:MouseEvent):void
        {
            //some action
        }


<mx:DataGrid id="reportDG" dataProvider="{CDODReportsModel.instance.reportDataArrayCollectionObject}"  color="black" horizontalScrollPolicy="on">
    <mx:columns>                        
        <mx:DataGridColumn headerText="info">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:HBox horizontalAlign="center">
                              开发者_高级运维  <mx:Image source="assets/images/i_info.png" scaleX="0.6" scaleY="0.6" click="hbox1_clickHandler(event)"/>
                    </mx:HBox>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn dataField="NAME" headerText="NAME"/>                         
        <mx:DataGridColumn dataField="TOTAL" headerText="TOTAL"/>

    </mx:columns>

</mx:DataGrid>

I want to dispatch an event on click, so when I click on the image I do an action. However, It is giving me an error when do that. I did some search and the suggested answers were using outerDocument and ParentDoecument .. both didn't work.

How can I access the click handler function (hbox1_clickHandler() in my code) ?

---

I dont think that this is possible if you are in Application class. If this is some other class, than you can just wright something like this:

click="MyClass.hbox1_clickHandler()"

Also this is not the best idea to wright inline item renderes. The best approach is to extend base item Renderer and make your own one. Also you can extend flash Event class and make your own. Doing this gives you possibility to send some additional data with your event.

But anyway, using yours approach code will be like this:

 protected function reportDG_initializeHandler(event:FlexEvent):void
 {
  reportDG.addEventListener("clicked", hbox1_clickHandler);
  function hbox1_clickHandler(event:Event):void
  {
   //some action
  }
 }

<mx:DataGrid initialize="reportDG_initializeHandler(event)">
    <mx:columns>
        <mx:DataGridColumn>
            <mx:itemRenderer>
                <fx:Component>
                    <mx:HBox>
                        <mx:Image click="dispatchEvent(new Event('clicked', true))"/>
                    </mx:HBox>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

---

It will work with outerDocument.functionName as long as the function is declared as 'public'. In your case, if you change your function declaration from protected to public, it will work. Here is the sample example code [working]:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            public function hbox1_clickHandler(event:MouseEvent):void
            {
                Alert.show("ite works");
            }
        ]]>
    </fx:Script>
    <mx:DataGrid id="reportDG" dataProvider="{new ArrayCollection(['A','B'])}"  color="black" horizontalScrollPolicy="on">
        <mx:columns>                        
            <mx:DataGridColumn headerText="info">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:HBox horizontalAlign="center">
                            <mx:Button label="Button" click="outerDocument.hbox1_clickHandler(event)"/>
                        </mx:HBox>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="NAME" headerText="NAME"/>                         
            <mx:DataGridColumn dataField="TOTAL" headerText="TOTAL"/>

        </mx:columns>

    </mx:DataGrid>
</s:WindowedApplication>