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

这是处理数据视图的点击事件的控制器函数..

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 回答