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

これを行う適切な方法は、DOM から特定の要素のイベントをサブスクライブすることです。しかし、秘訣はこれをどこで行うかです-コントローラーでそのような要素への参照を指定することはできません。このファイルが実行された時点では、要素はまだレンダリングされていないためです。

パネルがレンダリングされるのを待ってから、特定の DOM 要素を見つけてそのイベントをサブスクライブする必要があります。

于 2013-05-16T15:50:56.040 に答える