0

誰かがデータビューの addressInfo Div をタップしたときに、何らかのアクションを実行する必要があります。address Info div には、子 div もいくつか含まれています。これがデータビューのコードです....

{
    id: 'contactView',
    xtype: 'dataview',
    //styleHtmlContent: true,
    scrollable: false,
    itemTpl : new Ext.XTemplate('<div class="contactInfoContainer">',
                                        '<div class="infoType adminInfo">',
                                            '<div class="image"><img src="resources/images/user.png"/></div>',
                                            '<div class="info">',
                                                '<div class="name">{admin}</div>',
                                                '<div class="designation">{title}</div>',
                                            '</div>',
                                        '</div>',
                                        '<div class="infoType phoneInfo">',
                                            '<div class="image"><img src="resources/images/phone.png"/></div>',
                                            '<div class="info">Office: {phone}</br>Cell: {mobile}</div>',
                                        '</div>',
                                        '<div class="infoType emailInfo">',
                                            '<div class="image"><img src="resources/images/mail.png"/></div>',
                                            '<div class="info"><a href="mailto:{email}">david.smith@gmail.com</a></div>',
                                        '</div>',
                                        '<div class="infoType addressInfo">',
                                            '<div class="image"><img src="resources/images/location.png"/></div>',
                                            '<div class="info">{address}</br>{city}, {state} {zip}</div>',
                                        '</div>',
                                    '</div>'),
    store: 'Contact'
}

これは、dataview のタップ イベントを処理するコントローラー関数です。

onContactViewTap: function(dataview, index, target, record, e, eOpts) {
    var  el = Ext.get(event.target);
    console.log('Contact view cliecked.');
    if(el.hasCls('addressInfo')) {
        Ext.Msg.alert('Title', 'Can you see me?');
    }
}

警告メッセージは時々表示されますが、常に表示されるわけではありません。addressInfo の内側の div をタップすると、アラートが表示されないと思います。ints innerDiv がタップされてもaddressInfoのタップでアラートを表示したい。助けてください？

4

1 に答える 1

0

イベント委任を使用できます。

//same code

         store: 'Contact',
         listeners: [{
             element: 'element',
             delegate: 'div.addressInfo',
             event: 'tap',
             fn: function() {
                alert('addressInfo!');
                // fire costume event here and handle it in controller.
             }
         }]
      }

更新 1

正直なところ、デリゲートでレコードを取得する最良の方法が見つかりませんが、このようにすることはできます。

itemTpl で、レコード ID を追加するために以下の変更を行います

'<div class="infoType addressInfo" recordId="{id}">test',
'<div class="image" recordId="{id}"><img recordId="{id}" src="resources/images/location.png"/></div>',
'<div class="info" recordId="{id}">{title}</br>city, state zip</div>',
'</div>',

リスナーで

        listeners: [{
            element: 'element',
            delegate: 'div.addressInfo',
            event: 'tap',
            fn: function(evt,element) {
               var id = element.getAttribute("recordId");
               var index = this.getStore().find("id",id);
               var record = this.getStore().getAt(index); 
               console.log(record);
            }
        }]

更新 2

var ele = document.getElementsByClassName('addressInfo');
ele[0].style.backgroundColor = 'blue';
于 2013-09-19T09:41:24.190 に答える