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'); }

})

Rene Saarsoo · Accepted Answer · 2011-12-08 10:54:29Z

2

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.

edited Dec 8, 2011 at 10:54

answered Dec 8, 2011 at 10:49

Rene Saarsoo

14k10 gold badges63 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dbrin · Accepted Answer · 2011-12-09 00:09:11Z

1

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(){ ... }
...

answered Dec 9, 2011 at 0:09

dbrin

15.7k4 gold badges59 silver badges85 bronze badges

Comments

Krzysztof · Accepted Answer · 2011-12-08 09:18:38Z

0

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); }, and remove scope: this line.

edited Dec 8, 2011 at 9:18

answered Dec 8, 2011 at 8:48

Krzysztof

16.2k2 gold badges52 silver badges79 bronze badges

Collectives™ on Stack Overflow

Why extjs button handler doesn't work

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related