title: call a custom event from an item renderer in flex 4
body: <p>I have a Renderer: </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark" 
                  xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
  
    &lt;fx:Metadata&gt;
      [Event(name="addToCart",type="event.ProductEvent")]
    &lt;/fx:Metadata&gt;
    &lt;fx:Script&gt;
      &lt;![CDATA[
        import events.ProductEvent;
  
        import mx.collections.ArrayCollection;
  
  
        protected function button1_clickHandler(event:MouseEvent):void
        {
          var eventObj:ProductEvent=new ProductEvent("addToCart",data.price,data.descript);
  
          dispatchEvent(eventObj);
  
        }
      ]]&gt;
    &lt;/fx:Script&gt;
  
    &lt;fx:Declarations&gt;
      &lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;
    &lt;/fx:Declarations&gt;
  
    &lt;s:states&gt;
      &lt;s:State name="normal"/&gt;
      &lt;s:State name="hovered"/&gt;
    &lt;/s:states&gt;
  
    &lt;s:BorderContainer &gt;
      &lt;s:layout&gt;
        &lt;s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/&gt;
      &lt;/s:layout&gt;
  
      &lt;s:Label text="{data.descript}"/&gt;
      &lt;mx:Image source="{data.url}" width="50" height="50" width.hovered="100" height.hovered="100"/&gt;
      &lt;s:Label text="{data.price}"/&gt;
      &lt;s:Button includeIn="hovered" click="button1_clickHandler(event)" label="buy"/&gt;
  
  
  
    &lt;/s:BorderContainer&gt;
  &lt;/s:ItemRenderer&gt;
  </code></pre>
  
  <p>and the custom event class:</p>
  
  <pre><code>package events
  {
    import flash.events.Event;
    [Bindable]
    public class ProductEvent extends Event
    {
  
      public var price:String;
      public var descript:String;
  
      public function ProductEvent(type:String,price:String, descript:String)
      {
        super(type);
        this.price=price;
        this.descript=descript;
      }
      override public function clone():Event
      {
        return new ProductEvent(type,price,descript);
  
      }
    }
  }
  </code></pre>
  
  <p>but i cannot call that event in a container from the main application</p>
  
  <pre><code>&lt;s:SkinnableDataContainer id="Sk" x="200" y="300" left="100" right="900" dataProvider="{imagesCollection}" itemRenderer="components.ImageRenderer" includeIn="normal"   &gt;
      &lt;s:layout&gt;
        &lt;s:TileLayout/&gt;
      &lt;/s:layout&gt;
  
    &lt;/s:SkinnableDataContainer&gt;
  </code></pre>
  
  <p>any ideas?</p>
  
  <p>thanks</p>
  
  <hr>
  
  <p>I want to make this:</p>
  
  <pre><code>&lt;s:SkinnableDataContainer id="Sk" x="200" y="300" left="100" right="900" dataProvider="{imagesCollection}" itemRenderer="components.ImageRenderer" includeIn="normal" ***addToCart=something(event)*** &gt;
  </code></pre>