Published Sep 17, 2010 | The Sencha Dev Team | FAQ | Medium
Last Updated Jul 11, 2011

How do I make a simple Ajax request?

Use the Ext.Ajax.request method:

Ext.Ajax.request({
    url: 'myScript.php',
    params: {
        paramName: 'paramValue'
    },
    timeout: 3000,
    method: 'GET',
    success: function(xhr) {
        alert('Response is "' + xhr.responseText + '"');
    }
});

Add listeners to an Ext.Ajax.request object

Ext.Ajax is a singleton instance of Ext.data.Connection. Create your own instance of Ext.data.Connection:

var maskingAjax = new Ext.data.Connection({
    listeners: {
        'beforerequest': {
            fn: function(con, opt){
                Ext.get(document.body).mask('Loading...');
            },
            scope: this
        },
        'requestcomplete': {
            fn: function(con, res, opt){
                Ext.get(document.body).unmask();
            },
            scope: this
        },
        'requestexception': {
            fn: function(con, res, opt){
                Ext.get(document.body).unmask();
            },
            scope: this
        }
    }
});
maskingAjax.request({
    url: urlViewModify,
    success: function(r, o){
        reloadDRStore();
    },
    failure: submitFailed,
    params: {
        reviewed: '1'
    },
});

Aborting a request

Example of aborting a request for grid loading:

//abort the request
Ext.Ajax.abort(searchStore.proxy.activeRequest);                                
//hide any masks
var gMask = Ext.getCmp('searchGrid').loadMask;
if(gMask && gMask.hide){  gMask.hide();  }
}

"Permission denied to call method XMLHttpRequest.open" or "Access to restricted URI denied (NS_ERROR_DOM_BAD_URI)"

Ajax requests using the regular XMLHttpRequest mechanism can only be sent to a server in the same domain as the page was served from.

This is known as the Same Origin Policy

Scripts in my Ajax-loaded markup are not executed

Script execution in Ajax-loaded markup is not enabled by default for performance reasons. Script elements are extracted and executed optionally based upon either the global configuration option Ext.Updater.defaults.loadScripts, or options passed into the Updater.update method and the Element.update method.