Create Simple Listener for Link Clicks

Question

I have a fiddle here.

Still trying to figure out Ext JS. How do I fire a click event when a link is clicked? Should be the simplest thing in the world right? The alert should appear when clicking the a obviously but not the span. Also, I want to move that chunk of code that attaches the listener into a ViewController if possible.

var container = Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    html: '<div><a class="test">test....</a><br><br><br><span>some text</span></div>',
    listeners: {
        click: function(){
            Ext.Msg.alert('I have been clicked!')  
        }
    }
});


container.down('a.test').on('click', function(){ 
    this.fireEvent('click', container); 
}, container);

I was trying to follow the instructions here in the "Listening for DOM Events" section.

Also, once my handler function returns, I don't want any other handlers to potentially fire.. so I guess the equivalent of jQuery preventDefault.

Answer 1

You can simply use the listeners too, like:

listeners: {
    click: {
        element: 'el',
        delegate: 'a',
        fn: function() {
            Ext.Msg.alert('I have been clicked!')
        }
    }
}

A working example based on yours: https://fiddle.sencha.com/#fiddle/v72

(The delegate can be any selector)