0

我有一个生成一些 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');
}

});

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

4

2 回答 2

0

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

于 2013-05-16T12:22:40.840 回答
0

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

你需要等待你的面板被渲染,然后找到特定的 DOM 元素并订阅它的事件。

于 2013-05-16T15:50:56.040 回答