CODEWITHSUNDEEP
extjs
Greg Lafrance
Greg Lafrance

Reputation: 809

In ExtJS 4.2, how can I have a controller listening for click on <a> tag

I want to create a custom component that has several tags in a div.

I want an ExtJS controller to listen for the click events, and respond based on what tag link was clicked.

Sample code below. Any ideas would be welcome.

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            xtype: 'container',
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            items: [{
                xtype: 'component',
                html: '<div>' +
                        '<ul>' +
                            '<li><a class="one">One</a></li>' +
                            '<li><a class="two">Two</a></li>' +
                            '<li><a class="three">Three</a></li>' +
                        '</ul>' +
                    '</div>',
                listeners: {
                    click: function(event) {
                        alert(event);
                    }
                }
            }]
        }]
    });
});

Upvotes: 0

Views: 141

Answers (1)

So4ne
So4ne

Reputation: 1182

You need to add an id to your <ul> class in order to access to its <li>. See the example below, that's javascript and not Extjs controller, I don't know if you really needed a Extjs controller.

http://jsfiddle.net/88rEA/

You can manipulate event.target in order to get the value you want (innerText, innerHtml, name,...)

Upvotes: 1

Related Questions