Why extjs button handler doesn't work

Question

I have a window containing some button after clicking 'cancel' nothing happens. I'm really confused what could I'm getting wrong:

Ext.define('Myapp.view.User.NewForm', {
    extend: 'Ext.window.Window',
    width: 610,
    height: 380,
    y: 50,
    resizable: false,
    closable: true,
    draggable: false,
    title: 'new user',

    items: [{
        buttons: [{
                text: 'save',
                iconCls: 'form-save'
            },{
                text: 'cancel',
                iconCls: 'form-cancel',
                scope: this,
                handler: this.cancel     
            }]
    }],
    cancel: function() { alert('cancel'); }

})

Answer 1

Like Lolo says, this.cancel is undefined at the time when you define your Form class.

The standard solution for this problem is to create items array inside initComponent :

Ext.define('Myapp.view.User.NewForm', {
    ...

    initComponent: function() {
        this.items = [{
            buttons: [{
                text: 'save',
                iconCls: 'form-save'
            },{
                text: 'cancel',
                iconCls: 'form-cancel',
                scope: this,
                handler: this.cancel     
            }]
        }];

        this.callParent();
    },

    cancel: function() { alert('cancel'); }

});

When initComponent is invoked this points to the instance of your Form as one would expect. In you code this pointed to the global window object which didn't contain the cancel function.

Answer 2

You can also define your window buttons this way

...
initComponent: function(){
this.buttons =  [
            {   text:'Close',
                handler: function(){
                    this.up('window').close(); //<--Notice "this" refers to the button
                }
            },
            {
                text: 'Save',
                action: 'save',
                handler: this.save,
                scope: this
            }
        ]; //eo buttons
        this.callParent(arguments);
    }, //eo initComponent
    save: function(){ ... }
...

Answer 3

That's because this.cancel is undefined. See this code:

var that = this;
Ext.define('Myapp.view.User.NewForm', {

    items: [{
        buttons: [{
                text: 'save',
                iconCls: 'form-save'
            },{
                text: 'cancel',
                iconCls: 'form-cancel',
                scope: this, // that === this
                handler: this.cancel     
            }]
    }],
    cancel: function() { alert('cancel'); }
})

This passed to scope points to the same object as that variable. You must find other way to get reference to the parent control. You may try: handler: function(){ this.ownerCt.ownerCt.cancel.apply(this, arguments); } handler: function(){ this.ownerCt.ownerCt.cancel.apply(this, arguments); } , and remove scope: this line.