Ext.grid.EditorGridで表形式編集_1

Extの代表的なウィジィット（機能コンポーネント）はGridです。
Gridを使うと、従来テーブルで表現されてきた表が、エクセルのような列の入れ替え、幅の調整、ソートなどを行えるようになります。
EditorGridでは表示だけではなく、セルに対して編集ができます。数値のみに限定したり、金額表示や日付に対してはミニカレンダーからの入力も行えます。
（サンプルやネットでは表示のさせかたまでは調べることができましたが、今回は編集結果のデータベースへの反映までを解説します。
ただし解説の手間をはぶくため、jqueryAjaxライブラリとcakePHPWebアプリケーションフレームワークを併用させていただきます。 ）

おおまかな手順としては、
１．cakePHPで配列にデータ取得、Webservicesとしてjson形式で出力できるようにしておく
２．ページ表示。jsonデータを取得してExt.grid.EditorGridを構築。
３．編集したデータをデータストアExt.data.Store.getModifiedRecords()から取得
４．jqueryの$.eachで各行のデータをループしながらAjaxPOST送信する。
となります。

 

ほとんどのネットショップの管理画面での商品情報の更新は、商品一覧画面-＞各商品詳細画面-＞各商品更新となりますが、
このExt.grid.EditorGridとAjax技術を使うと、エクセルを扱うように一覧画面から直接複数商品の設定をすることができます。