ExtJS 4 Form.submit() without sucess:true in answer

Question

I have a form, which submitted like this:

form.submit({
                url: '/postme',
                waitMsg: 'Loading...',
                method: 'POST',
                success: function (form, action) {
                   console.log(action.response.responseText);                                   
                }
            });

But! The main thing that in answer I don't have property success: true and cannot manage to add it. Is there is a way to make something like callback parameter in Ext.Ajax.request instead of success? Or maybe there is a way to tell form.submit() that it must detect success in other responce parameter?

BTW: a cannot use Ext.Ajax.request because I have to pass multipart data from form (file upload).

Thanks in advance.

Ruan Mendes · Accepted Answer · 2013-04-24T16:22:46.573

The API explains that you have to pass success: true for the success handler to be called. This is the doc for the submit method

@param {Object} options The options to pass to the action (see Ext.form.Basic.submit and Ext.form.Basic.doAction for details)

if (form.isValid()) {
    // Submit the Ajax request and handle the response
    form.submit({
        success: function(form, action) {
            Ext.Msg.alert('Success', action.result.message);
        },

        // If you don't pass success:true, it will always go here
        failure: function(form, action) {
            Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
        }
    });
}

If you want to use a different property to indicate an error, you should look into http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.Basic-cfg-errorReader, you can configure the errorReader to read your property as you would like.

You can also route both your success and failure handlers to the same place and do determine it from the handler

Be sure to set standardSubmit:true so it doesn't get submitted with AJAX

Sample solution that will make your code feel a little bit less dirty

Ext.define('ns.my.CustomReader', {
    extend: 'Ext.data.reader.Reader', 
    alias: 'reader.ns-customreader',
    read: function(xhr) 
         var resp = Ext.JSON.decode(response.responseText, true);
         // Handle the case where response is not JSON too (unhandled server errror?)
         return {success: resp ? !!resp.id : false};
    }
});

Then, when you create the form, you can just use

 form : {
     errorReader: 'ns-customreader'
 }

I also noticed that you're not returning the record, which a reader should do according to the documentation, it may be that you just don't need it, but it'd be nice to satisfy the interface to keep your code in line with Ext-JS

The errorReader does not have to be a full-blown implementation of a Reader. It simply needs to implement a read(xhr) function which returns an Array of Records in an object with the following structure:

{ records: recordArray } // I think it needs success: boolean also.

And what's the point? I looked to api, and haven't find solution to tell, that response can be successful even if in answer from server there is no param `success: true`. As I said I need something like `callback` parameter in [Ext.Ajax.request](http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.Ajax-method-request) — Andrew Kevich, Apr 24 '13 at 13:24
@AndrewKevich It will be routed to the failure port if you don't pass `success:true`, just handle it there? You can't add `success: boolean` to your response? — Ruan Mendes, Apr 24 '13 at 13:59
@AndrewKevich If you really want another parameter to determine if it's an error, you'll need to pass in an `Ext.data.reader.Reader` as the `errorReader` config http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.Basic-cfg-errorReader — Ruan Mendes, Apr 24 '13 at 14:06
Thanks! Also looked into errorReader and made a bit dirty hack. — Andrew Kevich, Apr 24 '13 at 14:18
@AndrewKevich It's not that dirty, the documentation does say that all an error reader really needs is a function called `read` that takes an `XHR` and returns a list of the records, With your solution, I don't understand how you are returning the record that was created. Is that because you don't need it? See my edit for how to make it feel cleaner. — Ruan Mendes, Apr 24 '13 at 16:11

score 0 · Answer 2 · answered Apr 24 '13 at 13:34

If you don't send a success: true it will obviously be a failure. So handle your parameter in the failure callback function similar to this, where your alternative to success is status:

form.submit({
    url: '/postme',
    waitMsg: 'Loading...',
    method: 'POST',
    success: function (form, action) {
        console.log(action.response.responseText);                                   
    },
    failure: function(form, action) {
        if (action.result.status == true) {
            console.log('success!');
        }
    }
});

score 0 · Answer 3 · edited May 23 '17 at 10:30

In addition to @Juan Mendes answer I found the following conditions need to be true:

On the server side

The correct json needs to have a success true: {"success":true}
The returned contentType must be set to text/html

This is true for version extjs-3.4.0

Please look at: Why success callback is not called in extjs form submission?

This saved me a lot of time and I hope it helps someone else.

ExtJS 4 Form.submit() without sucess:true in answer

3 Answers3