PDA

View Full Version : [HOWTO] Adding Event Listeners to Component Elements



Jacky Nguyen
22 Jan 2012, 4:36 PM
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"];