How to add button listener in panel with customer html layout

[Frank345]

Hi,

I have an Ext.Panel that sets up its html property for a customer html layout. But how do I setup listeners to react on buttons or links.

Ext.define('app.view.Example', {
    extend: 'Ext.Panel',
    xtype: 'example',
    alias: 'example',
    config: {
        scrollable: true,
        html: 
            '<div>'+
            '<a id="buttonExample" href="#" class="buttonExample">do something</a>'+
            '</div>'
    }
}

Thanks,
Frank

[heretic]

Something like this might work for you:

initialize: function() {


    //...
    this.element.on({
        scope      : this,
        tap        : 'onTap'
    });
    this.callParent(arguments);
},
onTap: function(e, btn) {
    //add your code here to check which button, etc...
},

[Frank345]

Hello heretic,

that works perfectly fine. Thanks a lot.

However, I am also trying something else. Following Tommy Maintz' idea of an MVC architecture that separates view and controller, the code that is listening for buttons and links should ideally be located in the controller (unless it is view-only stuff). So I am trying this...

app/app.js

Ext.application({
    name : 'app',
    controllers: ['MyController'],
    ...
});

app/controller/MyController.js

Ext.define('app.controller.MyController', {
    extend: 'Ext.app.Controller',
    views: ['MyView'],
    init: function() {
        this.control({
            '#mybutton': {
                click: this.dosomething,
            }
        });
    },
    dosomething: function() {
        Ext.Msg.alert('Title', 'Yippee', Ext.emptyFn);
    }
});

app/view/MyView.js

Ext.define('app.view.MyView', {
    extend: 'Ext.Panel',
    xtype: 'myview',
    alias: 'myview',
    config: {
        scrollable: true,
        html: 
            '<div>'+
            '<a id="mybutton" href="#" class="mybutton">do something</a>'+
            '</div>'
    }
});

Unfortunately, the listener code is not being called. What am I doing wrong?
Or is there any reason why this approach would not work with custom html panels?

Cheers,
Frank

[rdougan]

That is because the control method uses ComponentQuery, and because you are just creating your button using HTML, it cannot find a component using that Id.

If you cannot use an actual Ext.Button, you will need to add custom logic into your view. I suggest you add a listener like suggested above, fire an event, and then listen to that event in your controller.