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，并在生成HTML的情况下将新面板项添加到原始文件中。

直到现在工作正常。

现在我需要向gridItem div添加一个tap（click）监听器，当用户点击其中一个gridItem时，我需要显示一个id为div的警报。

我该怎么做？

我尝试添加一个引用“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);
    }
}

Sencha触摸html div tap tapner

1 个答案: