Ajax Extjs Code Reactor

Question

I have such ajax code repeated many places. How can I reorganize this into one method so that it still allows 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); } }); 

Answer 1

  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);
       }
 }); 

extending the class (namespaces to you), you can still manipulate the url, parameters, method, success and failure. if not setup - default is

Answer 2

Well, this question is old, but perhaps a more flexible way to do this. It is very important to understand that Ext.Ajax is a singleton, that is, it is already a unique pre-created class. Singleton "extension" does not make much sense, and a single function may be unnecessarily confusing and / or limited later.

You can add your own custom Ajax request function as follows:

 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 recurring Ajax requests to:

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

The advantage of this is that you can easily add pre-configured parameters to your "dateRequest" function, and you can add add parameters to each Ajax request (for example, to a different timeout) without rewriting anything.

EDIT: Yikes! I originally posted the solution below, which I thought would “clone” Ext.Ajax, but it still just overrides the singleton.

This is a quote from Saki (Ext Guru) a couple of years ago. It refers to the cloning function that he wrote for regular objects / arrays:

The cloning function is by no means intended for cloning classes or an instance of Ext objects. This is almost impossible, since these settings are event handlers almost always, so cloning will certainly produce unpredictable results.

A singleton is an "instance of an Ext object" and therefore cannot be easily extended or cloned. If you do not want to interact directly with Ext.Ajax, you can create a function (as already mentioned). Here is a slightly more flexible form:

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

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

Answer 3

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); });