Sencha touch 点击时在视图中通过HTML执行函数

我有一个生成一些HTML的视图。我希望这个HTMl的一部分是可点击的，并在点击时执行一个功能。我可以使用Sencha触摸按钮项目来实现这一点，但是否可以引用和使用HTMl元素来代替

这是我的密码

看法

---

任何帮助都会很好，谢谢。

是的，这是可能的。您可以使用itemTap，此示例可以派上用场：

---

看看他们使用的控制器

正确的方法是从DOM订阅特定元素的事件。但诀窍在于在何处执行此操作—您不能仅在控制器中指定对此类元素的引用。因为在执行此文件时，尚未呈现元素

---

您需要等待面板被呈现，然后找到特定的DOM元素并订阅其事件

这帮了大忙，很抱歉延迟将其设置为正确答案。谢谢

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("")
}

});

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');
}

});