this.up() is not function EXTJS

Question

I want to submit my data to server from controller. Code is as follows:

renterForms: function() {
    var items3 = [{
        xtype:'foresto-renterdata',
        scrollable: true,
        scope: this,
        renderTo: 'mainPart',
        handler: function() {
            this.action3.hide();
        }
    },{
        text: 'Submit',
        ui: 'confirm',
        scope: this,
        handler: function() {
            var form = this.up('foresto-rentertype');
            if (form.isValid()) {  
                form.submit({
                    success: function(form, action) {
                        Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            } else { /
                Ext.Msg.alert('Error', 'Please correct form errors.')
            }
        }

in chrome debugger, I see next error:

Uncaught TypeError: this.up is not a function.

What is wrong? Is this a good way to get and submit data?

P.S. url for POST request define in code of form

Answer 1

scope: this

this is the actual issue which is messing up with scope inside handler function. Remove it and it will resolve the up function.

You can see the behavior with scope with following example fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2nhv

When "scope: this" is defined, then scope while building the component will be used and injected inside the handler function. It is equivalent to explicitly writing handlerFn.bind(this) which simply binds the different scope and returns a new function.