BUILDING LOGIN using ExtJS getView is not a function

Question

im trying to create a login using extjs with PHP but i stuck up to this problem...

TypeError: this.getView is not a function


this.getView().destroy();

here is my code....

i dont know why it could be error i just try to follow the tutorial in sencha docs

 buttons: [{
            text: 'Login',
            formBind: true,

        listeners: {
           click: function() {
                                        var form = Ext.getCmp('login').getForm();

                                        if(form.isValid()) {
                                                form.submit({
                                                        url : 'data/login.php',
                                                        method : 'POST',                                                      

                                                           success:function(){ 
                                                            this.getView().destroy();
                                                            Ext.widget('app-main');
                                                                },
                                                            failure: function() {
                                                                      obj = Ext.util.JSON.decode(response.responseText); 
                                                                        Ext.Msg.alert('Login Failed!', obj.errors); 
                                                            }
                                                });
                                        }
                               }              
        }
        }]

Alexander Alexander · Accepted Answer · 2014-09-22T08:50:36

Have you tried console.log(this)? I guess not...

this is always dependent on context. Your context here is not the view, but, if I am not mistaken, the Ext.Ajax.request, in whose success function you are trying to destroy the view.

This is why I refrain from using this in my code wherever it is not completely obvious even to a layman reader which context I am in.

EDIT: Since code looks bad in comments, I add it here. The answer as per original Ext source would be

click: function() {
    var me = this;
    var form = Ext.getCmp('login').getForm();

    if(form.isValid()) {
        form.submit({
            url : 'data/login.php',
            method : 'POST',

            success:function(){ 
                me.getView().destroy();
                Ext.widget('app-main');
            },
            failure: function() {
                obj = Ext.util.JSON.decode(response.responseText);
                Ext.Msg.alert('Login Failed!', obj.errors);
            }
        });
    }
}

while I personally would use

click: function(btn) {
    var form = Ext.getCmp('login').getForm();

    if(form.isValid()) {
        form.submit({
            url : 'data/login.php',
            method : 'POST',

            success:function(){ 
                btn.up('window').hide();
                Ext.widget('app-main');
            },
            failure: function() {
                obj = Ext.util.JSON.decode(response.responseText);
                Ext.Msg.alert('Login Failed!', obj.errors);
            }
        });
    }
}

BUILDING LOGIN using ExtJS getView is not a function

1 Answers