[HOWTO] Adding Event Listeners to Component Elements

[Jacky Nguyen]

In Sencha Touch 2, this old format of adding listeners to a Component's element via the 'listeners' config is no longer supported:

listeners: {
    el: {
        tap: function() {},
        // ...
    },
    body: {
        swipe: function() {},
        // ...
    }
}

Instead, the name of the element reference is now an option of any listener. Please use this API from now on:

listeners: {
    tap: {
        fn: function() {},
        element: 'element'
    },
    swipe: {
        fn: function() {},
        element: 'innerElement'
    }
}

Useful tips:

- By default, all Components have a single "element" reference, and all Containers have "element" and "innerElement" (similar to "body" in Sencha Touch 1.x) references.

- To have an exact list of available element reference names for a certain component, please either consult the documentation, or see the values of the 'referenceList' property. For example:

var button = new Ext.Button();
console.log(button.referenceList); // ["element", "badgeElement", "iconElement", "textElement"];