11

eg. <span id="foo">foo</span>如何在 ST2 应用程序中将 点击事件分配给任意范围 ( )？

我有一个简单的例子来说明我想做的事情。在示例中，我写了字母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);
    }
});
4

1 回答 1

22

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

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!');
            }
        }
    ]
});

主要部分是element和delegate。

  • element几乎在所有情况下都具有 的价值element，除非您使用自定义模板使用自定义组件。
  • delegate是一个简单的 CSS 选择器。所以它可以是任何span东西span .test.second

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

于 2012-04-24T21:59:05.527 回答