[ExtJS4] jsonデータとextraParamをPOST送信するとextraParamがGETで送られてしまう【メモ】

なんだかえらい嵌まった上に検索しても日本語情報が無かったのでメモ。

大体こんな感じでStoreを設計して、

Ext.define('MyStore', {
extend : 'Ext.data.Store',

autoLoad : false,
autoSync : true,
pageSize : 20,

proxy : {
actionMethods : {
create : 'POST',
destroy : 'POST',
read : 'POST',
update : 'POST'
},
type : 'ajax',
url : '/path-to-api/api',
extraParams: {
name: 'test'
},
reader : {
type : 'json',
root : 'results',
totalProperty : 'totalCount'
},
writer : {
type : 'json',
root : 'results',
}
},
});

store.updateで何か更新情報を投げると、投げたjsonデータは正しくPOST送信されるのですが、リクエストは

POST /path-to-api/api?name=test

という形式になってしまい、nameはGETで送信されてしまいます。送り方をあれこれ変えても上手く行かなかったのですが、結局のところ次のようにしたらば上手く行きました。

Ext.define('MyStore', {
extend : 'Ext.data.Store',

autoLoad : false,
autoSync : true,
pageSize : 20,

proxy : {
actionMethods : {
create : 'POST',
destroy : 'POST',
read : 'POST',
update : 'POST'
},
type : 'ajax',
url : '/path-to-api/api',
extraParams: {
name: 'test'
},
reader : {
type : 'json',
root : 'results',
totalProperty : 'totalCount'
},
writer : {
type : 'json',
root : 'results',
encode : true,
}
},
});

encodeをtrueにするとすべての要素をJSONエンコードしてパラメータとして送信します。受信する側も変更が必要ですが、ともあれすべての要素をPOSTメソッドにて送信することが可能です。ExtJS4のソースコードも読んだのですが、それ以外の手法ではextraParamsは自動的に展開されてurlに引数として追加される（つまりGETになる）ということのようなので、これしかないのかなと…

英語が読めないわけじゃないんですが、英語ドキュメントと英語フォーラムしか情報が無い場合、嵌まると長いなと感じます……メソッドをいちいちドキュメントから探す手間よ…自分の不甲斐なさに落ち込みます。

Related Posts