Adding a click event to an element?

Question

How can one assign a click event to an arbitrary span (eg. <span id="foo">foo</span>) in an ST2 app?

I have a trivial example that illustrates the idea of what I'd like to do. In the example, I write the letters A,B,C and I'd like to tell the user which letter they clicked.

Here's an image:

---

CODE SNIPPET

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

Answer 1

You can add a listener to a specific element using delegation. It is actually fairly simply to use.

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

The main parts are element and delegate.

• element will have the value of element in almost every case, unless you are working with custom components with custom templates.
• delegate is a simple CSS selector. So it could be anything from span to span .test.second

Ideally, as Thiem said, you should take advantage of components as much as possible. They will give you much more flexibility. But I know there are definitely some cases where you need to do this. There will be no performance implications; in fact, it will be faster than using components. However, you should never implement listeners the way he suggested. It will not be performant and is extremely dirty (as he mentioned).