Question

I have a function inside a toolbar, let’s call it:

Ext.define('MyArchive.Toolbar', { 
  search: function() {
    console.log('searching');
  }
}

Now I’d like to call this function when clicking a button. So I’m adding some click handlers in the afterRender on the toolbar setup:

afterRender: function() {
  Ext.getCmp('search-button').on('click', this.search);
} 

However, this doesn’t work and I ultimately need to go the full route of:

afterRender: function() {
  Ext.getCmp('search-button').on('click', function() {
    quick_search();
  )};
}

Any particular reason why my first attempt doesn’t apply the click handler as I expect?

Thanks for any explanations or refactorings! Additional patterns/idioms welcome…

Answer 1

Next try:

    var panelOverall = new Ext.form.FormPanel({
    html: 'bla',
    search: function() {
        console.log('searching');
    },
    buttons: [
        {
            text: 'Moo',
            id: 'button1',
            handler: function(){
                //window.destroy();
            }
        }
    ],
    afterRender: function() {
        Ext.getCmp('button1').on('click', this.search);
    } 
});

is working for me.. am I missing something?