ExtJS

2010/03/25 更新 

DirectStore でサーバー側のデータを読むことができるのは知っていました。が，更新をかける方法がわからず，Storeの中の更新データを取り出すメソッドを読んで，そのデータをExt.Directの関数をコールすることでサーバー側に渡していました。

でも，ちゃんと設定すれば，DirectStore の save() メソッドをコールするだけで，サーバーに更新をかけることができます。

Windowsのダイアログとかでよく使うデフォルトボタン。ダイアログが表示されているときにEnterキーが押されると，そのボタンが押されたことになる，というやつ。同様にキャンセルボタン，ESCキーが押されるとそのボタンが押されたことになる。

DirectStore／EditorGridPanel を使ってアプリケーションを作る時の基本的なことを書き留めておきたいと思います。サーバーサイドは，ｘFrameworkPX　を使います。 

 ExtJSのEditorGridPanelを使うとWebブラウザがExcelみたいになります。スゴイですねぇ。EditorGridPanelでは，Enterキーを押すと，セルの編集ができて，またEnterキーを押すと編集モードが終了します。この動作，これはこれでいいのですが，

 今作っているアプリケーションでは，カテゴリを選択して初めてグリッドに表示する項目が決まるという部分があります。全部で50個ぐらいの項目があるけれど，各カテゴリでは15～20ぐらいになる。他のカテゴリでしか必要のない項目は表示したくない。

ということは，カテゴリを選択してから，Gridの項目数が変わると言うこと。それをどうしたらいいのか，いろいろ考えました。

Ext.DirectとxFrameworkPXでのシステムで，システム利用前に認証を行うという場合を考えます。

一般的なWebシステムの場合，ユーザー名／パスワードでログインすると，セッションにログイン情報が記録され，その後の処理ではセッションでログイン状況をチェックしてから処理をする。というのが一般的な方法だと思います。

Ext Directでの更新処理をやってみたいと思いました。やっぱりExtJSらしいところで，GridPanel（いや更新ですからEditorGridPanelか）で訂正したデータをサーバーに更新をかけるということになります。

サーバーサイドのxFrameworkPXのモデルに更新用のメソッドを用意して，DirectStoreのapiにそれをセットするのかなと思ったのですが，apiの仕様がいまいちよくわかりません。パラメータの渡し方も。ですので，更新をStoreに任せるのではなくて，違う方法での実現を考えました。

※ その後，勉強の甲斐あって，Storeに任せる方法もわかりました。こちらを参照ください＞08.DirectStore でサーバー更新をかける

Ext Designerの操作を学んでいて，結局マニュアルをちゃんと読むべきだという結論に達し，一念発起して英文のマニュアルを読みました。

Senchaのサイトにある， Getting Started with Designer (PDF) を読みました。英語なので読み飛ばしていたのですが，やっぱりちゃんと読んでおくべきだと思いました。

それで，その文書を翻訳してみました。

 さて，Ext.Direct を xFrameworkPX で使うというところにやっとたどりついた。

前回の資料で

• xFrameworkPXにはxFrameworkPX_Controller_ExtDirectクラスが存在する。
• モジュールを作成して、コントローラーに登録するだけでモジュール名でJS側からアクセスできる。
• サーバーサイドのやりとり（api.phpとかrouter.phpの部分）は、ちゃんとオリジナルで実装して動作確認済。
• MVCのModel部分をExt側から透過的に利用できるため、開発が高速。

というのがありました。xFrameworkPX_Controller_ExtDirect を継承したコントローラーを使うと，「モジュール名でアクセスできる」ってことですね。モジュールに必要なメソッドを書いてやれば，それをExt.Directで使えるという訳です。ぐっとハードルが低くなります。