Question

当有人点击数据视图的addressInfo Div时，我必须执行一些操作。地址信息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时，它不显示警报。无论是否点击了innerDiv，我想在地址信息上显示警报。请帮助我？

Answer 1

您可以使用事件委派。

//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';

选择div数据视图的射击事件

1 个答案: