Увольнение на выбор div of dataview

Question

Мне нужно выполнить какое-либо действие, когда кто-то нажат на адресInfo Div файла dataview. адрес 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?'); 
    } 
} 

Сообщение показывает некоторое время, но не всегда. Я думаю, когда я нажимаю внутренний div адреса addressInfo, он не показывает предупреждение. Я хочу отображать предупреждение при нажатии addressInfo независимо от того, как ints 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. 
      } 
     }] 
     } 

Update 1

Честно говоря, я не могу найти лучший способ, чтобы получить запись в делегатом, но вы можете сделать так.

В itemTpl сделать ниже изменений для добавления Индентификационного

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

Update 2

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