apache-flex - 从 Flex 4 中的项目渲染器调用自定义事件

Question

我有一个渲染器:

<?xml version="1.0" encoding="utf-8"?>
<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">

  <fx:Metadata>
    [Event(name="addToCart",type="event.ProductEvent")]
  </fx:Metadata>
  <fx:Script>
    <![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);

      }
    ]]>
  </fx:Script>

  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>

  <s:states>
    <s:State name="normal"/>
    <s:State name="hovered"/>
  </s:states>

  <s:BorderContainer >
    <s:layout>
      <s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/>
    </s:layout>

    <s:Label text="{data.descript}"/>
    <mx:Image source="{data.url}" width="50" height="50" width.hovered="100" height.hovered="100"/>
    <s:Label text="{data.price}"/>
    <s:Button includeIn="hovered" click="button1_clickHandler(event)" label="buy"/>



  </s:BorderContainer>
</s:ItemRenderer>

和自定义事件类:

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);

    }
  }
}

但我无法从主应用程序的容器中调用该事件

<s:SkinnableDataContainer id="Sk" x="200" y="300" left="100" right="900" dataProvider="{imagesCollection}" itemRenderer="components.ImageRenderer" includeIn="normal"   >
    <s:layout>
      <s:TileLayout/>
    </s:layout>

  </s:SkinnableDataContainer>

有什么想法吗？

谢谢

---

我想做这个:

<s:SkinnableDataContainer id="Sk" x="200" y="300" left="100" right="900" dataProvider="{imagesCollection}" itemRenderer="components.ImageRenderer" includeIn="normal" ***addToCart=something(event)*** >

Answer 1

事件没有被调用，所以我不完全确定你想要什么。

您可以创建事件类的实例，如下所示:

var myProductEvent : ProductEvent  = new ProductEvent("productEventTypeA", true, ...); // true is for enabling Bubbles, so that the event bubbles up to the listener.

您可以从 itemRenderer 调度该事件，就像您在其他地方使用事件一样:

dispatchEvent(myEvent); 

还在项目渲染器上，声明将要调度的事件:

[Event(name="productEventTypeA", type="local.events.ProductEvent")]

您可以在实现项目渲染器的 List 或 DataGroup 组件上添加事件监听器，以便它在分派(dispatch)事件后运行您的代码:

myList.addEventListener("productEventTypeA", onProductEvent); // or a constant instead of "productEventTypeA"

或

myDataGroup.addEventListener("productEventTypeA", onProductEvent); // or a constant instead of "productEventTypeA"

最后在添加事件监听器的同一文件中声明监听器函数:

public function onProductEvent(e:ProductEvent):void
{
// do stuff
}

注意:在 itemRenderer 中，您通常希望使事件冒泡，以便可以在使用渲染器的组件上监听该事件 - 通常是基于列表的类。