Firing event on selection of a div of dataview

Question

I have to perform some action when someone tap on the addressInfo Div of the dataview. address Info div also contains some more child div. Here is the code of data view....

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

Here is the controller function to handle the tap event of 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?');
    }
}

The alert message displays sometime but not always. I guess when I tap the inner div of the addressInfo it doesn't shows alert. I want to display alert on tap of addressInfo no matter ints innerDiv is tapped. Pleae help me?

Answer 1

You can use event delegation.

//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.
             }
         }]
      }

Update 1

Honestly i can't find best way to get record in delegate, But you can do like this.

In itemTpl do below changes for adding record 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>',

In listeners

        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);
            }
        }]

Update 2

var ele = document.getElementsByClassName('addressInfo');
ele[0].style.backgroundColor = 'blue';