PDA

View Full Version : How handle DOM image and anchor click events in Controller



simonr25
2 Jul 2013, 9:43 AM
Hello,

Is there a way of catching DOM 'img' and 'a' events in the Controller?

e.g. the following items are declared in a 'Ext.container.Viewport' class.



...
items: [{
xtype: 'button',
text: 'Help',
id: 'btn'
},
{
html: '<a href="anc.action" id="aid"><img src="download_1.png" alt="Demo" width="16px" height="16px"; /></a>'
},
{
html: '<img src="download_1.png" id="imgid" alt="Demo" width="15px" height="15px" onclick="alert(\'You clicked on me\');" />'
}
]
...


In the controller I would like to be able to handle the cases where the user clicks the anchor link and also where they click on the image.

For button it could be as follows:



...
init: function () {
this.control({
'#btn': {
click: this.btn
},
...
btn: function () {
alert('You clicked me.');
},


Is there a way of doing this for images/anchors?

p.s. Are there any problems/issues with defining the 'href' and 'onclick' attributes in the Viewport class (outside the controller)?

slemmon
4 Jul 2013, 9:23 AM
You can use the delegate config for the listeners, but somewhat indirectly in the control() method. Here's an example:



this.control({
'panel': {
afterrender: function (panel) {
panel.on({
click: function () { console.log('click'); },
element: 'body',
delegate: ':any(a|img)'
// or just do 'a' and another listener for 'img' clicks if you want separate behaviors
});
}
}
});


Ext.widget('viewport', {
layout: 'anchor',
items: [{
html: '<a href="#" id="aid">pseudo-link</a><img src="download_1.png" alt="Demo" width="16px" height="16px"; />'
}]
});