Question

I’m using few container widgets for the screen layout. I need to extend the container to have “onClick” event so I can do something along the lines:

<screen>
    <container name="customer-list" ..>
        <!-- some content over here -->
    </container>

    <action:behaviors>
        <action:when widget-event="customer-list.onClick">
            <!-- some actions here -->
        </action:when>
    </action:behaviors>
</screen>

Answer 1

To add support for the onClick event you’ll need to add following to the widget:

Declare the event in the constructor of the widget:

WidgetName = function() {
    this.onClick = new Toronto.client.Event("WidgetName onClick");
};

then in startup method add following line:

widgetContext.addManagedDOMEvent(this.getContainerElement(), "onclick", this._onClickHandler, this, "WidgetName onClick binding");

and the only thing left to implement is the actual handler:

, _onClickHandler: function() {
    this.onClick.fireEvent({
        widget: this
    });
}

The idea is that you add an event to the widget, bind the event to the DOM node and in the handler you extend the attribute object of the fireEvent to include all relevant details you need for the screen.