Button tap event not firing

[dmregister]

Hey guys, I have been trying to listen for a button click in a view form my controller to no avail. Just wondering if I should setup a listener in the view to fire and event for the controller or if there is a better option. I am trying to keep all my functions and listeners in my controller.

My Controller:

Ext.define('Controllers.PublicationsController', {
    extend: 'Ext.app.Controller',
    
    config: {
        control:{
            PublicationsContent : {
                painted : 'loadPublicationsContent'
            },
            BrowseByTopic:{
                tap : 'loadBrowseByTopic'
            }
        },
        refs: {
           PublicationsContent: '#publicationsContent',
           PublicationsPage: '#publicationsPage',
           BrowseByTopic: 'button[browseByTopic]'
        },
    },
    init: function(options)
    {           
            this.callParent(arguments);
            console.log('PublicationsController:init');
    },
    loadPublicationsContent:function()
    {
        console.log('loadPublicationsContent:init');
        
        var template = new Ext.Template(app.util.Templates.config.publications,{compiled: true});
        this.getPublicationsPage().setHtml(template.html);
    },
    loadBrowseByTopic:function()
    {
        console.log(this,'clicked::loadBrowseByTopic');
    },
    loadSearchByTag:function()
    {
        console.log(this,'clicked::loadSearchByTag');
    }
}); 

The button comes from a template which I have stored as a string in a global template file.


My View:

Ext.define('Views.publications', {
    extend: 'Ext.Panel',
    
    xtype: 'publicationsView',
       id: 'publicationsPage',
   
       config: {
        styleHtmlContent: true,
        scrollable: 'vertical',
        items:[
            {
                docked: 'top',
                xtype: 'toolbar',
                title: 'Publications',
                cls:'panel_title'
            },{
                xtype: 'panel',
                id: 'publicationsContent',
                defaults: {
                    styleHtmlContent: true
                },
            },
        ],
    },
    initialize: function() {
        
        this.callParent(arguments);
        console.log('publicationsView:init');
    },
}); 

Thanks for any help you might have!!

[mitchellsimoens]

A ST2 button and a HTML button are two different things and will not behave the same. refs and control configs use ComponentQuery which is trying to look for a ST2 button but you have a HTML button and is not able to be listened to.

[dmregister]

To insert a ST2 button into a html element?

These do not work:

var button = Ext.create('Ext.Button', {
    text: 'Button'
});
Ext.fly('publications_search_choice').update(button);

var button = Ext.create('Ext.Button', {
    text: 'Button'
});
Ext.fly('publications_search_choice').add(button);

var button = Ext.create('Ext.Button', {
    text: 'Button'
});
Ext.fly('publications_search_choice').setHtml(button);

I am assuming it's the same issue as before, I am not dealing with a component but a html div.

Thanks again for your help.