EXT Js Synchronous ajax request

Question

How can I make synchronous ajax requests in EXT JS?

For example, given this code:

test1();
ajaxRequest(); //Ajax Request
test2();

The test2 function is executed without even finishing the execution of ajaxRequest(), which has an Ext.Ajax.request call .

How can I make text2() execute only after the ajaxRequest() function has been executed?

I understand that one way of doing it is to call the test2 function in a callback, but I have some dependencies and a lot of code that has to be executed after the ajax request, in a synchronous manner. Can you please help me with the best solution?

Answer 1

I needed something similar and after looking the source code of Ext.Ajax.request() and Ext.data.Connection, I found that they check for a async attribute, on the request() method, so, it's actually possible to make a synchronous request, like this:

var response = Ext.Ajax.request({
    async: false,
    url: 'service/url'
});
var items = Ext.decode(response.responseText);

It seems this async attribute is not documented, so... of course... be aware that it may change in future releases.

Answer 2

In Extjs.Ajax each AJAX call results in one of three types of callback functions:

• success that runs if the AJAX call is successfully created and gets a response
• failure that runs if the AJAX call fails to get a response
• callback that runs AFTER the AJAX call gets a response

If you want to execute test2(); after your ajax request finishes,
then put your test2 function inside of a success, failure, or callback function; whichever one you choose is up to you...

More info on the success or failure function can be found here.

test1();
Ext.Ajax.request({
    url: 'page.php',
    params: {
        id: 1
    },
    // scope: this, // you can set the scope too
    callback: function(opt,success,respon){
        test2();
    } 
});

Note: This method doesn't work with ExtJS 3.