Flex : Adding a click handler on SkinnableDataContainer's items

Question

Hi,

I am new to Flex.

What I am looking for here is adding a click handler on all the items created by a SkinnableDataContainer. I tried several things that didn't work, and I have no idea what is the right way to do it.

<s:SkinnableDataContainer id="teamList"
                          itemRenderer="TeamSummaryRenderer">
    <s:dataProvider>
        <s:ArrayList>
            <fx:Object teamName="A super team 1"/>
            <fx:Object teamName="A super team 2"/>
            <fx:Object teamName="A super team 3"/>
        </s:ArrayList>
    </s:dataProvider>
</s:SkinnableDataContainer>

Furthermore, I don't want to declare the handler in my custom TeamSummaryRenderer component. I would prefer that the handler code stays at application level.

Is there a simple 'Flex-ish' to achieve this ?

Answer 1

No.

<s:SkinnableDataContainer
    Properties
    autoLayout="true"
    clipAndEnableScrolling="false"
    dataProvider="null"
    horizontalScrollPosition="null"
    itemRenderer="null"
    itemRendererFunction="null"
    layout="VerticalLayout"
    typicalItem="null"
    verticalScrollPosition="null"

    Events
    rendererAdd="No default"
    rendererRemove="No default"
  />

http://opensource.adobe.com/wiki/display/flexsdk/Spark+SkinnableDataContainer

I think you have to keep your handler in the itemRenderer as the document says. They don't have any properties to achieve it directly.

Answer 2

Ok ... I found the answer myself :

<s:SkinnableDataContainer
rendererAdd="my_handler(event)"/>

private function my_handler(event:RendererExistenceEvent):void{
    event.renderer.addEventListener(flash.events.MouseEvent.CLICK, clickhandler);
}

The rendererAdd event is triggered every time a new renderer is added to the container, and it has a property renderer which is the renderer object itself. So here is the place for adding a click handler on every one of the renderers that are created.