Extjs4，等待ajax请求

Question

I should run multiple ajax requests in one button click, but all requests should wait until the first one is executed. I have tried to put all requests in the success callback of the first one but this gives this error:

TypeError: o is undefined
return o.id;

And just the first request is executed.
This is my code:

    if(form1.isValid()) {
                form1.submit(me._genFormSubmitAction('my_DB','my_Action', function() {
                    console.log('form1 success');
                    //Submit Form2

                    if(form2.isValid()) {
                        form2.submit(me._genFormSubmitAction('my_DB','my_Action', function() {
                        console.log('form2 success');
}));

//Submit Form3  
.... 

_genFormSubmitAction:

_genFormSubmitAction: function(db,action, successCallback) {
    var me = this;
    return {
        clientValidation : true,
        url              : me.getApplication().apiUrl,
        waitMsg : '<p align=right>..الرجاء الإنتظار</p>',
        async:false,
        params           : {
            _module: 'administrationcassocial',
            _action: action,
            _db:db
        },
        success          : function(form, action) {
            if(action.result.success == true) {
                Ext.callback(successCallback, me);
                form.owner.destroy();
            } else {
                console.log('url=',url);
                Ext.Msg.alert(action.result.error, action.result.errormessages.join("
"));
            }
        },
        failure          : function(form, action) {
            switch (action.failureType) {
                case Ext.form.action.Action.CLIENT_INVALID:
                    Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                    break;
                case Ext.form.action.Action.CONNECT_FAILURE:
                    Ext.Msg.alert('Failure', 'Ajax communication failed');
                    break;
                case Ext.form.action.Action.SERVER_INVALID:
                    Ext.Msg.alert(action.result.error, action.result.errormessages.join("
"));
            }
        }
    };
}

Answer 1

This is a scope issue.

The callback of form1.submit happens in the callback own scope, so it has no idea what form2 is.

You can try:

if(form1.isValid()) {
    var me = this;
    form1.submit(me._genFormSubmitAction('my_DB','my_Action', function() {
        console.log('form1 success');

        //Submit Form2
        if( me.form2.isValid() ) {
            form2.submit(me._genFormSubmitAction('my_DB','my_Action', function() {
                console.log('form2 success');
            }));
        }
    }));
}

Or the more proper solution in my view:

// Added aScope var
_genFormSubmitAction: function( db,action, aScope, successCallback ) {
    var me = this;
    return {    
        // ...
        scope: aScope
    }
}

Then you call:

form1.submit(me._genFormSubmitAction('my_DB','my_Action', this, function() {
}));