CODEWITHSUNDEEP
javascriptextjsextjs4
user1063963
user1063963

Reputation: 1375

Why extjs button handler doesn't work

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

})

Upvotes: 1

Views: 578

Answers (3)

dbrin
dbrin

Reputation: 15673

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

Upvotes: 1

Rene Saarsoo
Rene Saarsoo

Reputation: 13917

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.

Upvotes: 2

Krzysztof
Krzysztof

Reputation: 16140

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.

Upvotes: 0

Related Questions