Добавление события click к элементу?

Как назначить событие click для произвольного диапазона (например, < span id = "foo" > foo </span> ) в приложении ST2? У меня есть тривиальный пример, который иллюстрирует идею того, что я хотел бы сделать. В этом примере я пишу буквы A, B, C, и я хотел бы сказать пользователю, какое письмо они нажали. Вот изображение:

enter image description here

Код:

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);
    }
});

Ответы

Ответ 1

Вы можете добавить слушателя к определенному элементу с помощью делегирования. На самом деле это довольно просто использовать.

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

В идеале, как сказал Thiem, вы должны максимально использовать преимущества компонентов. Они придадут вам большую гибкость. Но я знаю, что есть определенные случаи, когда вам нужно это делать. Не будет никаких последствий для производительности; на самом деле, это будет быстрее, чем использование компонентов. Однако вы должны никогда реализовывать прослушиватели так, как он предполагал. Он не будет исполнен и чрезвычайно грязный (как он упоминал).