Question

我有一个生成一些HTML的视图。我希望这个HTMl的一部分可以点击并在点击它时执行一个函数。我可以使用Sencha Touch按钮项来使用它，但是可以引用和使用HTML元素吗？

这是我的代码。

查看

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

});

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

Answer 1

是的，这是可能的。你可以使用itemTap，这个例子可以派上用场：http://www.mysamplecode.com/2012/05/sencha-touch-list-button-example.html 看看他们使用的控制器。

Answer 2

这样做的正确方法是从DOM订阅特定元素的事件。但诀窍是在哪里做 - 你不能只在控制器中指定对这些元素的引用。因为在执行此文件时，您的元素尚未呈现。

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

在点击时在视图中通过HTML执行功能

2 个答案: