Sencha touch html div tap listener

Question

我正在研究sencha触摸应用程序。我有一个从panel

扩展的视图

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，并在生成的html中添加一个新的面板项。

到目前为止一切正常。

现在我需要为gridItemdiv添加一个点击(单击)监听器，当用户单击其中一个gridItem时，我需要显示一个带有div id的警报。

我该怎么做呢?

我尝试添加一个引用"gridItem"类的控件:

config: {
    refs: {
        homeGrid: 'emergencyGrid',
        gridItem:  '.gridItem'
    },
    control: {
        '.gridItem': {
            tap: 'onGridItem'
        }
    }

但是当我点击时，onGridItem不会被调用。

我认为问题是我在初始化控件后动态添加div。是否有一种方法来添加tap监听器后，我注入面板内的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);
    }
}