Why delegate method is not fired in view's controller

Question

I included button component into html,

{
    xtype: 'container',
    padding: 10,
    width: 560,
    html: '<div class="class1"><span >Enter value <input type="text"  id="unput1">to process</span></div>' +
    '<button class="button" type="button">Click me</button>'
},

and I created delegate event in that view

listeners: {
    el: {
        delegate: 'button',
        click: 'onButtonClick'
    }
}

I put 'onButtonClick' method in view's controller (which is properly defined in view's config as controller: 'mycontroler'). However, for some reason the app is looking for this method in MainController.

Ext.util.Event.getFireInfo(): No method named "onButtonClick" on MyApp.view.main.MainController

Of course, I can simply move the method in main controler, but I don't understand such behaviour, because it is against the MVC paradigm. Can someone explain me this?

Answer 1

I was not able to reproduce your problem exactly, but I saw that in my example it searches for the function within the component itself instead of the listener. The set of the scope to 'controller' leads also to a runtime exception. But instead of moving the function I can see the following options as alternatives.

1.) You can write a function which calls the one in the controller

listeners: {
     el: {
         delegate: 'button',
         click: function () {
             this.component.controller.onButtonClick();
         }
     }
 }

2.) You can move the listener to the component itself

// ...
controller: 'mycontroller',
items: [{
    xtype: 'container',
    padding: 10,
    width: 560,
    html: '<div class="class1"><span >Enter value <input type="text"  id="unput1">to process</span></div>' +
        '<button class="button">Click me</button>',
    listeners: {
        el: {
            delegate: 'button',
            click: 'onButtonClick'
        }
    }
}]

I also created a fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3chv

Feel free to update this one and show your constellation. Possibly someone can say what exactly the problem of the fiddle / definition is.

Beside of this possibly this blog post can help you: https://www.sencha.com/blog/declarative-listeners-in-ext-js-5/