Sencha touch html div tap прослушиватель

Question

Я работаю над приложением sencha touch. У меня есть мнение, что простирается от панели

Вид

Ext.define('MyApp.view.home', { 
extend : 'Ext.Panel', 
xtype : 'homeGrid', 

config : { 
    scrollable: 'vertical', 
    width: '100%', 
    height: '100%', 
    html : '<div></div>' 
} 
}); 

От контроллера, я добавляю элемент в этой панели динамически, после прочтения некоторых данных с сервера:

В контроллере

var homeGrid = this.getHomeGrid(); 
var htmlString = '<ul class="myGrid">'; 
       htmlString = htmlString + '\ 
               <li>\ 
                <div class="gridItem" id="item1">\ 
                 <div class="gridIcon">\ 
                  <img class="gridIconImage" src="myIcon.png"/>\ 
                 </div>\ 
                 <div class="gridItemName">\ 
                   Item 2\ 
                 </div>\ 
               </li>\ 
               <li>\ 
                <div class="gridItem" id="item2">\ 
                 <div class="gridIcon">\ 
                  <img class="gridIconImage" src="myIcon.png"/>\ 
                 </div>\ 
                 <div class="gridItemName">\ 
                   Item 1\ 
                 </div>\ 
               </li>\ 
               <li>\ 
                <div class="gridItem" id="item3">\ 
                 <div class="gridIcon">\ 
                  <img class="gridIconImage" src="myIcon.png"/>\ 
                 </div>\ 
                 <div class="gridItemName">\ 
                   Item 3\ 
                 </div>\ 
               </li>\ 
               '</ul>';   

      homeGrid.add({ 
       xtype: 'panel', 
       html : htmlString 
      }); 

В основном я просто генерировать HTML сюда m конкатенированной строки и добавить новый элемент панели в оригинал с созданным HTML.

До сих пор все работает нормально.

Теперь мне нужно добавить прослушиватель (щелчок) к элементу gridItem, когда пользователь нажимает на один из элементов gridItems, мне нужно показать предупреждение с идентификатором div, записанным на пленку.

Как я могу это сделать?

Я пытался добавить элемент управления, которые ссылаются на класс «GridItem»:

config: { 
    refs: { 
     homeGrid: 'emergencyGrid', 
     gridItem: '.gridItem' 
    }, 

    control: { 
     '.gridItem': { 
      tap: 'onGridItem' 
     } 
    } 

Но onGridItem никогда не вызывается, когда я нажимаю.

Я думаю, проблема в том, что я добавляю divs динамически после инициализации элемента управления. Есть ли способ добавить прослушиватель крана после того, как я ввел div внутри панели?

Большое спасибо за любую помощь

Answer 1

Вы можете попробовать слушать нажмите на элемент homeGrid или самой панели. Внутри обработчика событий вы можете использовать объект события, чтобы узнать целевой элемент html, и на основе этого вы можете запускать что угодно. Например, всякий раз, когда вы хотите, вы можете добавить слушателя в свой класс представления, как это:

Ext.getCmp('#homeGrid').element.on({ 
    scope: this, 
    tap: 'onPanelTap' 
}); 

и в методе вы можете сделать что-то вроде этого:

onPanelTap : function(evt){ 
    var element = Ext.get(evt.target); 
    //console.log(evt, element); 
    var parentSpan = element.parent('.gridItem'); 
    if(!parentSpan){ 
     return false; 
    } 
    var id = parentSpan.getAttribute('id'); 
    if(element.hasCls('gridIcon')){ 
     console.log("Icon tapped for "+id); 
    } else if(element.hasCls('gridItemName')){ 
     console.log("Name tapped for "+id); 
    } 
}