Sencha Touch 2：点击容器不起作用（点击按钮工作正常）答案

【问题标题】：Sencha Touch 2: tap on container doesn't work (tap on button works fine)Sencha Touch 2：点击容器不起作用（点击按钮工作正常）
【发布时间】：2014-06-29 12:11:34
【问题描述】：

我已经阅读了SO question: Controller for Buttons Sencha Touch 2 [Solved] 来实现点击按钮。有效！

不幸的是，我需要点击容器，而不是按钮。一旦我将xtype:'container' 更改为xtype:'button'，它点击正常，我看到console.log 消息，所以一切正常。一旦我将它改回xtype:'container'，它就会停止工作，没有console.log 消息。

所以，我的问题是：如何让点击事件为我的xtype:'container' 工作？为什么它只适用于按钮？我错过了什么吗？

附：据我所知，容器没有点击事件。那有什么解决办法呢？将按钮制作为具有多个文本字符串和背景的解决方案吗？

好的，根据您的回答，目前还不清楚如何使按钮看起来像容器。容器是一个上面有两个字符串的图像。这是我的容器：

{
    xtype:'container',
    cls:'home-img',
    id: 'home-img',
    layout : {
        type : 'vbox',
         align: 'middle'
    },
    items:[
          { xtype:'container',
            html:'Your current rate is:'  
          },
          { xtype:'container',
            tpl:'{rate}'
          }
          ],
},

将xtype:'container' 替换为xtype:'button' 后，我很难显示{rate} 参数并且无法生成两个字符串。

【问题讨论】：

标签： events sencha-touch sencha-touch-2 containers tap

【解决方案1】：

我不是 sencha touch 方面的专家，但在这种情况下，我认为您需要对元素进行监听。这对我有用：

Ext.define('RSSFramework.view.ListContainer', {
extend: 'Ext.Container',

config: {
    layout: {
        type: 'fit'
    },
    listeners:[
                 {
                    element: 'element',
                    event: 'tap',
                    fn: function() {
                        console.log('TAP!');
                    }
                }
            ]
}

});

【讨论】：

最佳解决方案。完全符合 OP 的要求
这是一个比选择的更好的解决方案。
非常感谢您的代码。它真的帮助了我
"注意：使用 Ext.define() 定义类时指定监听器的配置是不好的做法。相反，仅在使用 Ext.create() 实例化类时指定监听器。” docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/… 是的，它就像一个魅力 - 想知道为什么这样做是不好的做法
还要注意，如果 "element: 'element'," 并且您在 Container 中有一个 Component，轻按该 Component 不会触发该功能，而是配置需要是 element: 'innerElement' ,

【解决方案2】：

在 Sencha 中，没有可用于容器的 tap 事件。容器基本上就像可以容纳不同内部组件/元素的东西一样工作。但是，如果您希望将点击事件放置在容器上，您确实可以解决问题。正如您所提到的，您可以继续创建一个按钮，设置背景，并设置一些字符串（但这不是按钮应该用于的用途）。或者您可以使用所需的字符串和背景设置 HTML，使其成为 div 并在其上设置 Onclick 事件。

【讨论】：