ExtJS - Custom button call function from controller?

Question

I have a button in the view:

items: [{
    xtype: 'button',
    text: 'Click me!',
    handler: 'onClick' // <- call function from controller
}]

Now I want to change that button to custom button (contains a text and a link), just like this:

items: [{
    xtype: 'component',
    html: getLink()
}]

In same js file, I have a function:

function getLink() {
    // Doing something
    return '<div>Hi, <a href="...">Click me!</a></div>';
}

I want to call 'onClick' function when I click custom button. How can I do?

Thanks!

Answer 1

Add click event handler in your controller with afterrender:

View:

items: [{
    xtype: 'component',
    html: getLink(),
    itemId: 'myLink'
}]

Controller:

var controller = this;

controller.control({
    // Selector for your link parent component
   'yourSelector': {
      afterrender: function(component) {
           component.down('#myLink').on('click', function() {
                controller.onClick();
           });
      }
   }
})

Answer 2

You can use element and delegate on your listener, for example:

{
            xtype: 'box',
            html: '<div>Hi, <a class="custom-btn">Click me!</a></div>',
            listeners: {
                click: {
                    element: 'el',
                    delegate: '.custom-btn',
                    fn: function() {
                        console.log('click!');
                    }
                }
            }
        }

https://fiddle.sencha.com/#fiddle/11mt

Answer 3

xtype: 'component',
autoEl:{
    tag: 'a',
    href: '',
    onClick: 'nameYouFunction'
}