Executing a function via HTML in a view when tapped - sencha-touch

Question

I have a view that generates some HTML. I want part of this HTMl to be clickable and execute a function when it is tapped.I can get this to work using a Sencha Touch button item but is it possible to reference and use an HTML element instead?
Here is my code.
View
Ext.define('myApp.view.ScheduleDetails', {
extend: 'Ext.Panel',
xtype: 'ScheduleDetails',
config: {
title: '<span class="logo"></span>',
styleHtmlContent: true,
scrollable: 'vertical',
tpl: [
'<img src="{image}" width="100%" class="mh"/>',
'<div class="dark-overlay">',
'<h1>{title}</h1>',
'<h3>{description}</h3>',
'<h1>{time}</h1>',
'</div>',
'<div class="actions">',
'<div class="actions-left check-in" id="checkin">',
'Check-in',
'</div>',
'<div class="actions-right map">',
'Map',
'</div>',
'</div>',
'<div class="schedule-details">',
'<p>{longdesc}</p>',
'</div>'
].join("")
}
});
Controller
Ext.define('myApp.controller.ScheduleDetails', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: 'ScheduleDetails',
'checkinbutton': '.actions #check-in'
},
control: {
'.x-button #checkin': {
tap: 'showPage'
},
'checkinbutton': {
tap: 'showPage'
}
}
},
showPage: function(){
console.log('Callback');
}
});
Any help would be great, Thanks.

Answer 1

The proper way of doing this is to subscribe to events for particular element from the DOM. But the trick is where to do this - you can't just specify reference to such elements in controller. Because at the time this file is executed your element is not yet rendered.
You need to wait for your panel to be rendered and then find particular DOM element and subscribe to its events.

Answer 2

Yes, this is possible. You can use itemTap, this example can come in handy: http://www.mysamplecode.com/2012/05/sencha-touch-list-button-example.html
look at the controller that they use.