Ext.Ajaxについて

今までjQueryの$.ajaxを利用していたのですが、Ext使う時にはExt.Ajaxだろうということでこちらを試したところ、ほとんどjQueryと同じ感覚でリクエスト出来ました。

Ext.Ajax.request({
  url: 'get-json.php',
  params: {
    'param1': 'value1'
  },
  headers:{
    'myheader': 'sample header'
  },
  extraParams:{
    'exParam': 'exValue'
  },
  method: 'GET',
  success: function(response, options){
    console.log("success");
  },
  failure: function(response, options){
    console.log("failure");        
  }
});

headersはリクエストヘッダに追加するヘッダ、extraParamsはリクエスト終了時に追加で受け取れるパラメタです。リクエストパラメタには追加されずに、successメソッドのoptionsに追加されています。あとデフォルトのmethodはPOSTです。

Ext.Ajaxのイベントとしては下記の3つがあり、全てのリクエストで共通して実行されます。呼ばれる順番としては、beforerequest -> requestcomplete/requestexception -> success/error となっていて、jQueryのように成功/失敗にかかわらず呼び出されるメソッドはありません。

リクエスト中にスピナーを表示したり、通信終了時に実行したいメソッドがある場合はこの辺のイベントに追加すればよさげです。

Ext.Ajax.on('beforerequest', function(conn, options){
  console.log('beforerequest');
}, this);

Ext.Ajax.on('requestcomplete', function(conn, response, options){
  console.log('requestcomplete');
}, this);

Ext.Ajax.on('requestexception', function(conn, response, options){
  console.log('requestexception');
}, this);

また、Ext.AjaxはクラスではなくExt.data.Connectionのインスタンスなので、自分でExt.Ajaxを生成してやれば、上記イベントを複数種類作成してリクエスト毎に使い分けたりできます。

Ext.MyAjax = new Ext.data.Connection({  
  //Ext.Ajaxで追加されているのでいれておく
  autoAbort : false,
  serializeForm : function(form){
      return Ext.lib.Ajax.serializeForm(form);
  }
});

Ext.MyAjax.request({
  url: 'get-json.php',
  params: {
    'param1': 'value1'
  },
  headers:{
    'myheader': 'sample header'
  },
  success: function(response, options){
    console.log("success");
  },
  failure: function(response, options){
    console.log("failure");        
  }
});

他にもオプションがありますが、最低限これだけ分かれば問題なく利用できそうです。