Sencha touch html div tap listener

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將新面板項添加到原始項。

直到現在一切正常。

現在我需要添加一個tap（click）listener到gridItem div，當用戶點擊其中一個gridItems時，我需要顯示帶有div的id的警報。

我該怎麼做？

我試圖添加引用「的GridItem」級控制：

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

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

但是當我點擊了onGridItem永遠不會被調用。

我認爲問題是我在初始化控件後動態添加div。在面板內注入div後，是否有添加tap監聽器的方法？

非常感謝您的幫助

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