Sencha touch 2 是否向元素添加单击事件？

如何将点击事件分配给ST2应用程序中的任意span（

，例如span id=“foo”>foo/span>

）呢

我有一个简单的例子来说明我想做什么。在这个例子中，我写字母

A、B、C

，我想告诉用户他们点击了哪个字母

这是一张图片：

---

代码片段

Ext.application({

    launch: function() {
        var view = Ext.create('Ext.Container', {

            layout: {
                type: 'vbox'
            },
            items: [{
                html: '<span id="let_a">A</span>  <span id="let_b">B</span> <span style="float:right" id="let_c">C</span>',
                style: 'background-color: #c9c9c9;font-size: 48px;',
                flex: 1
            }]
        });
        Ext.Viewport.add(view);
    }
});

---

可以使用委托将侦听器添加到特定元素。实际上，它的使用相当简单

Ext.Viewport.add({
    html: 'test <span class="one">one</span> hmmm <span class="two">two</span>',
    listeners: [
        {
            element: 'element',
            delegate: 'span.one',
            event: 'tap',
            fn: function() {
                console.log('One!');
            }
        },
        {
            element: 'element',
            delegate: 'span.two',
            event: 'tap',
            fn: function() {
                console.log('Two!');
            }
        }
    ]
});

Ext.Viewport.add({
html:“测试一个hmmm两个”，
听众：[
{
元素：'元素'，
代表：“span.one”，
事件：“点击”，
fn：函数（）{
console.log（'One！'）；
}
},
{
元素：'元素'，
代表：“span.two”，
事件：“点击”，
fn：函数（）{
console.log（'Two！'）；
}
}
]
});

主要部分是

元素

和

委托

• element

  几乎在所有情况下都具有

  element

  的值，除非您使用的是带有自定义模板的自定义组件

• delegate

  是一个简单的CSS选择器。所以它可以是从

  span

  到

  span.test.second

---

理想情况下，正如Thiem所说，您应该尽可能多地利用组件。它们会给你更多的灵活性。但我知道在某些情况下你肯定需要这样做。不会影响绩效；事实上，它将比使用组件更快。但是，您应该永远不要按照他建议的方式实现侦听器。它不会执行，而且非常脏（正如他所提到的）。

我可以在同一个html中处理多个吗：就像我的示例中一样？太棒了-谢谢你的回答。Sencha的文档可以使用更多的例子来使用Ext/Touch在其组件和控件中提供的标准模型之外的功能。@rdougan我们可以使用id而不是类，因为我的类是动态的，我尝试了span.id，但它不起作用me@rdougan如何从span@sur007将值传递给侦听器当事件调用侦听器

fn

。该对象有一个目标属性，即单击的范围。谢谢，但是如果您有多个具有唯一ID的自定义组件，该如何操作？我有来自我的商店的带有唯一ID的缩略图，我正试图将其传递到弹出窗口。我当然不希望每个缩略图id都有多个侦听器？