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:

enter image description here

CODE SNIPPET

Ext.application({

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

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

Thanks, but how to do it if you have multiple custom components that have unique ids? I have thumbnails with unique ids from my store that I am trying to pass to a popup. Surely I wouldn't want to have multiple listeners for each thumbnail id? — Digeridoopoo, Apr 23 '13 at 07:29

rdougan · Accepted Answer · 2012-04-24T22:14:30.483

22

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).

edited Apr 24 '12 at 22:14

answered Apr 24 '12 at 21:59

rdougan

7,217
2
34
63

Can I handle multiple 's in the same html: like in my example? – Apr 24 '12 at 22:06
Fantastic - thank you for this answer. Sencha's docs could use more examples of using Ext/Touch's abilities outside of the standard model presented in their components and controls. – phatskat Jul 18 '12 at 15:50
@rdougan can we use id instead of class because my class is dynamic and i tried span.id it didn't worked for me – surhidamatya Aug 08 '13 at 04:32
@rdougan how can i pass value on listeners from span. – surhidamatya Aug 08 '13 at 04:40
1

@sur007 the first argument passed when the listener `fn` is called is the event. That Object has a target property which is the span clicked. – rdougan Aug 08 '13 at 08:45
@rdougan thanks i solved it but i am having problem to pass value from click event. These values comes from tpl dynamically – surhidamatya Aug 08 '13 at 09:48
Thanks a lot @rdougan. It's a shame for Sencha that one must dig up some year-old comments from some site to find such important information about their API. – frbry Jun 03 '14 at 16:59

Adding a click event to an element?

1 Answers1

Linked