click on image to dispatch event in flex

Question

I have a image in renderer class and if i click image i need to dispatch a event to the main mxml page in flex.

In Renderer Class:-

public function clickOnMoreImage(event:Event):void {                
    var moreImageEvent:Event = new Event("clickOnMoreImage");
    var parent:EventDispatcher = parentDocument.parentDocument as EventDispatcher;
    if (parent != null) {
        parent.dispatchEvent(moreImageEvent);
    }
}


<mx:Image id="imgStatus" buttonMode="true" useHandCursor="true" click="clickOnMoreImage(event)" />

parent class:-

this.addEventListener("clickOnMoreImage", showMoreImagePopUpData);

public function showMoreImagePopUpData(event:Event):void {
    Alert.show("clicked on More Image");
}

This is not working. can i know any work around for this?

Try stackoverflow.com/questions/7193665/spark-list-with-buttons/… — RIAstar

Timofei Davydik Timofei Davydik · Accepted Answer · 2012-05-03T14:31:54

Don't use parent or parentDocument in this case. You cannot be sure of nesting level of your renderer against top application.
The "Flex" way is to use event bubbling.

Dispatch event by renderer itself (with bubbles set to true). It will "bubble" (in case the renderer is not a child of a popup) up to stage, so you can listen to it in any parent of the renderer (e.g. -> DataGroup -> List -> Application -> SystemManager -> Stage).

var moreImageEvent:Event = new Event("clickOnMoreImage", true); //2nd parameter "true"
dispatchEvent(moreImageEvent);

click on image to dispatch event in flex

1 Answers