I have this kind of ajax code repeated lot of places. How can I refactor this into a single method so it will still allow different behavior on success or failure.

Ext.Ajax.request({
    url : 'ajax.php' , 
    params : { action : 'getDate' },
    method: 'GET',
    success: function ( result, request ) { 
    Ext.MessageBox.alert('Success', 'Data return from the server: '+     result.responseText); 
    },
    failure: function ( result, request) {  Ext.MessageBox.alert('Failed', result.responseText); 
    } 
});

I have this kind of ajax code repeated lot of places. How can I refactor this into a single method so it will still allow different behavior on success or failure.

Ext.Ajax.request({
    url : 'ajax.php' , 
    params : { action : 'getDate' },
    method: 'GET',
    success: function ( result, request ) { 
    Ext.MessageBox.alert('Success', 'Data return from the server: '+     result.responseText); 
    },
    failure: function ( result, request) {  Ext.MessageBox.alert('Failed', result.responseText); 
    } 
});

• javascript
• refactoring
• extjs

3 Answers 3

MyAjaxRequest = Ext.extend ( Ext.Ajax.request, {
     url : 'ajax.php' ,
     params : { action : 'getDate' },
     method: 'GET',
     success: function ( result, request ) {
        Ext.MessageBox.alert ('Success', 'Data return from the server: '+    result.responseText);
     },
     failure: function ( result, request) {
        Ext.MessageBox.alert('Failed', result.responseText);
      }
} ); 

by extending class (namespaces up to you) you still able to manipulate url, params, method, success, and failure. if not setup - defaults are there

Okay, this question is kind of old, but there arguably a more flexible way to do this. It's really important to realize that Ext.Ajax is a singleton -- that is, it is already a unique pre-instantiated class. "Extending" a singleton doesn't make much sense, and a separate function may be unnecessarily confusing and/or limiting later on.

You can add your own special Ajax request function like this:

Ext.Ajax.dateRequest = function(myObj){
   // set the pre-configured parameters here
   myObj.url = 'ajax.php';
   myObj.params = { action: 'getDate'};
   myObj.method = 'GET';
   // call the original request function with the modified config object
   this.request(myObj); 
};

So now you can change your repeated Ajax requests to:

Ext.Ajax.dateRequest({
   success: yourSuccessFunction
   ,failure: yourFailureFunction
});

The benefit to this is that you can easily add pre-configured parameters to your "dateRequest" function, AND you can add addition parameters to each Ajax request (like a different timeout) without rewriting anything.

EDIT: Yikes! I originally posted a solution below that I thought would "clone" Ext.Ajax, but it still merely overrode the singleton.

This is a quote by "Saki" (Ext guru) a couple of years ago. He's referring to a clone function he wrote for regular object/arrays:

The clone function is in no case meant to clone classes or instantiated Ext objects. It is almost impossible as these install event handlers almost always so cloning would definitely lead to unpredictable results.

The singleton is a "instantiated Ext object" and thus cannot be extended or cloned easily. If you don't want to mess with Ext.Ajax directly, you can create a function (as already mentioned). Here is a somewhat more flexible form:

function dateRequest(myObj){
   myObj.url = 'ajax.php';
   myObj.params = { action: 'getDate'};
   myObj.method = 'GET';
   return Ext.Ajax.request(myObj);
}

Then call it with dateRequest({success: successFunc, failure: failFunc}).

This code will achieve the same result:

function callme (callback) {
    Ext.Ajax.request({
        url : 'ajax.php' , 
        params : { action : 'getDate' },
        method: 'GET',
        success: callback,
        failure: function ( result, request) {  Ext.MessageBox.alert('Failed', result.responseText); 
        } 
    });
}

callme(function ( result, request ) { 
    Ext.MessageBox.alert('Success', 'Data return from the server: '+     result.responseText); 
});