Событие запуска при выборе div представления данных

Я должен выполнить какое-то действие, когда кто-то нажимает на Div addressInfo в представлении данных. 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}">[email protected]</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?');
    }
}

Предупреждающее сообщение отображается иногда, но не всегда. Я думаю, когда я нажимаю на внутренний div addressInfo, он не показывает предупреждение. Я хочу отображать оповещение при нажатии на addressInfo независимо от того, нажат ли ints innerDiv. Пожалуйста, помогите мне?


extjs sencha-touch sencha-touch-2.1 sencha-touch-2.2
person MSC    schedule 19.09.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать делегирование событий.

//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 сделайте следующие изменения для добавления идентификатора записи

'<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';
person Viswa    schedule 19.09.2013
comment
Как я могу получить ссылку на запись? - person MSC; 24.09.2013
comment
Еще раз спасибо viswa ... Это было действительно полезно ... еще один вопрос ... как я могу изменить цвет фона div addressInfo при нажатии на него ... - person MSC; 26.09.2013