1

我正在开发一个煎茶触摸应用程序。我有一个从面板延伸的视图

风景

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

直到现在 al 工作正常。

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

我怎样才能做到这一点？

我试图添加一个引用“gridItem”类的控件：

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

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

但是当我点击时永远不会调用 onGridItem 。

我认为问题在于我在初始化控件后动态添加了 div。在面板内注入 div 后，有没有办法添加点击侦听器？

非常感谢您的帮助

4

1 回答 1

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);
    }
}
于 2013-05-20T12:56:56.107 回答