Ext.grid.EditorGridで表形式編集_3
編集したデータを保存します。
表の中のデータは、Ext.data.Storeの中の「data」プロパティに存在します。
.getModifiedRecords()メソッドで、更新されたレコードのみを得ることができます。
この中の各レコードををjqueryの$.eachでループしながら$.postを使って非同期にアップデートします。
ツールバーを作成して、追加、保存、再読込みのボタンと関数を定義します。
ds.load();の前に次のコードを記述します。
// ツールバー追加
var gridHead = grid.getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(gridHead,
[
{text: '商品追加',
handler : function(){
var itm = new Item({
id: '',
title: '',
comment: '',
categorye_id: '1',
（中略、、、）
minimum: 0,
visible: 0
});
grid.stopEditing();
ds.insert(0, itm);
grid.startEditing(0, 0);
}},
{text: '保存する',
handler : function(){
displayInfoClear();
//更新データのみ取得する
var mrs = ds.getModifiedRecords();
$.each(mrs, function(i) {
//AJAXでPOSTする
$.post("/items/ajaxpost/", {
'data[Item][id]': this.data.id,
'data[Item][title]': this.data.title,
'data[Item][comment]': this.data.comment,
'data[Item][categorye_id]': this.data.categorye_id,
（中略、、、）
'data[Item][minimum]': this.data.minimum,
'data[Item][visible]': this.data.visible
},
displayInfo);
});
ds.reload();
}},
{text: '再読込み',
handler : function(){
ds.reload();
}}
]
);
javascriptで以下の関数を追加します。
//更新ステータスを表示する
function displayInfo(data) {
$("#postinfo").html($("#postinfo").html() + "<br />" + data);
}
//更新ステータス表示を消去する
function displayInfoClear() {
$("#postinfo").html("");
}
cakePHP側のコントローラーに以下のメソッドを作成します。
//表形式編集保存 -----------------------------------------------
function ajaxpost() {
if(!empty($this->data)) {
if ($this->Item->save($this->data)) {
print("Id=".$this->data["Item"]["id"]."保存しました");
exit();
} else {
print("Id=".$this->data["Item"]["id"]."保存できませんでした");
exit();
}
}
exit();
}
'data[Item][title]': this.data.title,
がフォーム部品のname属性とvalue属性に相当します。
cakePHPではこのnameフォーマットで送ると、
$this->Item->save($this->data)
だけで更新とバリデーション（データ検証）を行ってくれます。
新規追加されたレコードにはidがないので、自動的にInsetをしてくれます。
成功したら「保存しました」と返されるので、displayInfo(data)関数で表示します。
この一連の更新作業は各レコードごとに非同期で行われます。
再読込みするには、Ext.data.Store.reload()とするだけです。