Dispatch event from itemrenderer

Question

Greetings.
i've got a main applicationxml: main.mxml
followed by a component: optionbox.mxml, being loaded in the
main.mxml.
in optionbox.mxml another component is loaded:
optionCanvas.mxml
inhere, a datagrid is being created with a custom
itemrenderer: itemsRenderer.mxml
in this itemsRenderer (wich alters the display of the cells)
is an image located.
when you click this image, an object has to be dispatched to
the main.mxml.
how can I do this? It works when I dispatch from a component,
but not from an itemrenderer.
can anyone help me out.??
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical"
xmlns:c="comp.*"
backgroundAlpha="0"
backgroundColor="#FFFFFF">
<mx:«»Style>
global{
fontFamily:Arial;
Canvas{
color:#000000;
.FooterLink{
color:#0066CB;
fontWeight:Bold;
fontThickness:900;
.Footer{
backgroundColor:#E1F0F7;
DataGrid{
borderThickness:0;
selectionColor:#FFFFFF;
selectionDisabledColor:#FFFFFF;
disabledColor:#FFFFFF;
rollOverColor:#FFFFFF;
ToolTip {
fontFamily: Arial;
fontSize: 12;
color: #000000;
</mx:«»Style>
<mx:«»Script>
<![CDATA[
import events.itemEvent;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var selectedItems:ArrayCollection = new
ArrayCollection();
private function photoSelectedHandler(event:itemEvent):void{
selectedItems.addItem(event.selectedItem);
]]>
</mx:«»Script>
<mx:VBox width="980" height="100%">
<mx:HBox>
<mx:VBox>
<c:LeftPane id="leftpane" width="201" height="100%" />
<c:Checkout id="checkout" selectedItems="{selectedItems}"
styleName="checkout" fontWeight="bold"/>
</mx:VBox>
<c:«»Swfcontainer width="537"
height="405" />
<c:OptionBox width="222" height="100%" id="optionBox"
itemSelected="{photoSelectedHandler(event)}"/>
</mx:HBox>
<c:Footer width="100%"
styleName="Footer"></c:Footer>
</mx:VBox>
</mx:Application>
[/code:1]
optionbox.mxml
[code:1]<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
color="#400000" creationComplete="printerData.send()"
xmlns:c="comp.*">
<mx:Metadata>
[Event(name="itemSelected",
type="events.itemEvent"«»)]
</mx:Metadata>
<mx:«»Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var printer:ArrayCollection
private function printerDataHandler(event:ResultEvent):void{
printer = new ArrayCollection();
printer=event.result.printer.confItem;
]]>
</mx:«»Script>
<mx:HTTPService id="printerData" url="data/data.xml"
result="printerDataHandler(event)"/>
<mx:Accordion id="accOptions" width="100%" height="100%"
headerHeight="32" backgroundAlpha="0" fontSize="11" color="#0066CB"
resizeToContent="true">
<mx:Canvas label="{printer.getItemAt(0).label}"
width="100%" height="100%" backgroundAlpha="0">
<mx:VBox>
<mx:Text width="198"
htmlText="{printer.getItemAt(0).text}" />
</mx:VBox>
</mx:Canvas>
<mx:Repeater id="repAccOptions" dataProvider="{printer}"
startingIndex="1" >
<c:optionCanvas
itemData="{repAccOptions.currentItem}"/>
</mx:Repeater>
</mx:Accordion>
</mx:HBox>[/code:1]
optionCanvas.mxml
[code:1]<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
label="{itemData.label}" width="100%" height="100%"
verticalScrollPolicy="off">
<mx:«»Script>
<![CDATA[
[Bindable]
public var itemData:Object;
]]>
</mx:«»Script>
<mx:VBox width="100%">
<mx:Text width="100%" htmlText="{itemData.text}" />
<mx:«»DataGrid
dataProvider="{itemData.consumables.consumable}"
headerHeight="0"
width="100%" itemRenderer="itemRenderers.OptionsRender"
alternatingItemColors="#FFFFFF">
<mx:columns>
<mx:«»DataGridColumn
dataField="consumableLabel" width="200"/>
</mx:columns>
</mx:«»DataGrid>
</mx:VBox>
</mx:Canvas>[/code:1]
optionsRenderer.mxml
[code:1]<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
verticalScrollPolicy="off" horizontalScrollPolicy="off" width="165"
height="45">
<mx:Metadata>
[Event(name="itemSelected",
type="events.itemEvent"«»)]
</mx:Metadata>
<mx:«»Script>
<![CDATA[
import events.itemEvent;
[Bindable]
public var selectedItem:Object;
private function addItem(itemObj:Object):void{
selectedItem = new Object();
selectedItem = itemObj;
var eventObj:itemEvent = new
itemEvent(selectedItem,"itemSelected"«»);
dispatchEvent(eventObj);
]]>
</mx:«»Script>
<mx:Image source="assets/btnAddItem.jpg"
click="addItem(data)"/>
<mx:Text htmlText="{data.consumableLabel}"
height="45"/>
<mx:Image source="assets/btnInfoItem.jpg"
horizontalAlign="right">
<mx:toolTip>
{data.consumableLabel}
Partnumber:{data.consumablePartnr}
Price:{data.consumablePrice}
Omschrijving
{data.consumableDescr}</mx:toolTip>
</mx:Image>
</mx:HBox>[/code:1]

Answer 1

Override clone() method inside event to make sure you take into account the bubbling property, and then inside renderer dispatch the event with bubbling property set to true.
Alternatively you can dispatch on the list e.g :
owner.dispatchEvent(newCopyProductEvent(CopyProductEvent.COPY_PRODUCT,o));
If you choose to do the latter make sure you don;t get into an infinite loop inside list if you decide to redispatch from there,
C