1

Sencha リストの行に html を追加しました。Windows の Chrome と Safari では onClick が正常に動作しますが、iPad ではクリック イベントが動作しません。iPadで動作する例を作成するための提案があれば教えてください。

Sencha Fiddle の例: http://www.senchafiddle.com/#MadlC#SPOJb#psFLV

コード：

var store = Ext.create('Ext.data.Store', {
    fields: ['htmlRow'],
    autoLoad: true,
});

store.add([{ "htmlRow": "<div onclick='func_click1();' style='background:gray;width:70px;float:left'>Click 1</div><div onclick='func_click2()' style='background:yellow;width:70px;float:left'>Click 2</div>" }]);
store.add([{ "htmlRow": "Edt"}]);
store.add([{ "htmlRow": "Jamie"}]);
store.add([{ "htmlRow": "Aaron"}]);
store.add([{ "htmlRow": "Dave"}]);
store.add([{ "htmlRow": "Michael"}]);
store.add([{ "htmlRow": "Abraham"}]);
store.add([{ "htmlRow": "Jay"}]);

//define the application
Ext.application({

    launch: function() {

        Ext.Viewport.add({

            width: '100%',
            height: '100%',

            centered: true,
            hideOnMaskTap: false,

            layout: 'fit',

            items: [{
                xtype: 'list',
                disableSelection:true,  

                itemTpl: '<strong>{htmlRow}</strong>',
                store: store
            }]
        });
    }
});

function func_click1(){
    alert("Why This Click 1 Working on Safari and Google Chrome in Windows, But Not Working on Ipad !");
}
function func_click2(){
    alert("Why This Click 2 Working on Safari and Google Chrome in Windows, But Not Working on Ipad !");
}
4

2 に答える 2

1

「itemtap」イベントでは、「event」パラメータを調べて、リスト アイテムのどの領域がタップされたかを判断できます。あなたの場合、次のようなことができます：

  • 1) 最初の行の 2 つの div に id を追加します。

    store.add([{ "htmlRow": " <div id='area1' onclick='func_click1();' style='background:gray;width:70px;float:left'>Click 1</div><div id='area2' onclick='func_click2()' style='background:yellow;width:70px;float:left'>Click 2</div>"}]);

  • 2) itemtap リスナーで:

    itemtap : function(list, index, target, record, event) {
    console.log(event.target.id);
    if (event.target.id=='area1') {
        alert('area1 clicked!');
    }
    if (event.target.id=='area1') {
        alert('area2 clicked!');
    }
}

必要に応じて、「イベント」パラメーターにさらに多くの情報があることに注意してください。

お役に立てれば。

于 2012-05-10T06:48:45.987 に答える
1

その理由は、「onclick」は名前が示すようにクリック用に設計されているため、タップ入力デバイス (タッチ デバイスを意味します) では使用できないためです。

リスト内の行がタッチされたときにフィードバックを取得する適切な (ST2) 方法は、リストの「itemtap」イベントをリッスンすることです。

...
items: [{
            xtype: 'list',
            disableSelection:true,  

            itemTpl: '<strong>{htmlRow}</strong>',
            store: store,
            listeners: {
                 itemtap : function(list, index, target, record, event) {
                     // your code here
                 }
        }]
 ...
于 2012-05-09T16:59:23.743 に答える