Uncaught TypeError: Cannot read property 'responseText' of undefined

Question

buttons: [
    {
        text: "Add User",
        id: "new-record-add-button",
        handler: function() {
            var form = this.up('form').getForm();
            form.submit({
                url: BasePath+'/main/admin/adduser',
                method: 'POST',
                waitTitle: 'Authenticating',
                waitMsg: 'Please Wait',
                success: function(form, action) {
                win.close()
                     Ext.Msg.show({
                         title:'Success'
                        ,msg:'User added successfully'
                        ,modal:true
                        ,icon:Ext.Msg.INFO
                        ,buttons:Ext.Msg.OK
                });
                },

            failure: function(form, action) {

                console.log(action.response.responseText);
                obj = Ext.JSON.decode(action.response.responseText);
                console.log(obj);
                Ext.Msg.alert('Error',obj.errors)
                form.reset();
            }
        })

                //this.up("window").close();
        }

    },
    {
        text: "Cancel",
        handler: function() {
            this.up("window").close();
        }
    }
]

I am getting the following error when I reach the failure function in my form:

Uncaught TypeError: Cannot read property 'responseText' of undefined 

This is my php code:

public function adduserAction()
{
            $response = new JsonModel();
            //$error = array();
            $errors="";
            if(!ctype_alpha($_POST["first_name"])) {
                $errors.="First Name cannot contain characters and numbers";
            }
            if(!ctype_alpha($_POST["last_name"])) {
                $errors.="Last Name cannot contain characters and numbers";
            }

            if(!filter_var($_POST['email_address'], FILTER_VALIDATE_EMAIL)) {
                $errors.="Email should be of the format john.doe@example.com";
            }
            if(empty($_POST["role"])) {
                $errors.="Role cannot be empty";
            }
            if($errors!="") {
                $response->setVariables(array("success"=>false, "errors"=>$errors));

            }
            else {
                $response->setVariables(array("success"=>true, "errors"=>$errors));

            }
            return $response;
}

Answer 1

responseText is an ExtJs thing - it represents the actual text returned from the server (eg, using echo ) before being decoded.

You should get it in asynchronous callbacks within the operation or request objects, unless there was a server exception of a sort or if you set success to false , that's why you don't get it in the failure handler.

To really understand what's going on with it I recommend you have a look at Connection.js .

Answer 2

if you do a form submit through ExtJs, then on success of the form submission it needs response.responseText to be set as {"sucess":"true"}. if you are submitting the form to some page you have to make sure that you will be returning this object from backend. Or else you have to override the existing onSuccess method.

The second way is something like this,

Ext.override(Ext.form.action.Submit,{

    onSuccess: function(response) {
        var form = this.form,
            success = true,
            result = response;
            response.responseText = '{"success": true}';
            form.afterAction(this, success);
        }
    });

Place this snippet in your application and see the magic. Cheers. :)