従来型C/SアプリケーションをSenchaを使ってWeb化してみる

データパッケージを使う

Model、Store、Proxy

　Sencha Ext JSに搭載されたデータパッケージは、Web APIによって供給されるデータの定義、取得、保管といった操作を担当します。データパッケージを用いることで、JavaScriptコードを記述することなく、任意のデータをグリッドをはじめとするUIコントロールやグラフに表示させることができます。データの読み込みやキャッシュもデータパッケージが担当するので、大量のデータであっても、ユーザーの操作を妨げることなく、ハイパフォーマンスで読み込めます。

• Model
  データのフィールド定義やレコード単位での操作が行えます。各フィールドでは型や値の検証機能などを定義でき、データを安全に取り扱えます。
• Store
  データの保管場所です。Web APIから取得したデータはStoreに保存され、Gridなどの表示に利用できます。アプリケーションによるStoreの変更は必要に応じてWeb API側に同期したり、変更結果を破棄したりできます。
• Proxy
  Ajax、JSONP、RESTなどのAPIやWeb Storageに対するアクセスを提供するコンポーネントです。APIから取得するデータは JSON、XML、ARRAYのためのReader／Writerがサポートされます。

Modelの定義

　今回のデータのModel定義をAPIが返すJSONの内容にあわせて作成します。画面左側のProject InspectorでModelを追加し、画面右側のConfigペインでフィールド名などのプロパティを設定します。

図13　Modelの定義

StoreとProxyの設定

　Ext JSのStoreは、利用するAPIの仕様によっていくつかのバリエーションがありますが、基本的な動作を確認するために、今回は基本クラスのExt.data.Storeを用います。Project InspectorにStoreを追加すると、アプリケーション全体で利用できるグローバルなストアとして利用できます。作成したStoreにはProxyとReaderを追加します。

図14　StoreとProxy

　設定が完了したら、MyStoreの横に表示されているプレビューボタン（目玉アイコン）をクリックすると、APIから取得できるデータを確認できます。

　このように作成したStoreをGridのStoreプロパティで指定し、GridのそれぞれのColumnで表示するフィールドをdataIndexプロパティ指定すると、APIから取得したデータは設計画面のGridで表示できることが確認できます。

図15　データの表示

データの絞り込み検索

　一覧表示に絞り込み検索の機能をつけるには、SearchFieldにEvent Bindingを行います。また入力パラメータをサーバに送信するには、Proxy.extraParamを設定してStore.reload()を実行します。これでAPIからは絞り込み検索の結果が取得でき、Gridに表示されます。

図16　絞り込み検索の実装

図17　イベントハンドラの記述I

データの編集

　データの編集は、Grid選択時に別のFormを表示して行います。Gridで選択された行のデータをビューモデルにセットしてFormから利用できるようにします。

onGridSelect: function(dataview, selected, eOpts) {
    this.getViewModel().set('record', selected[0]);
    this.getView().animateActiveItem(1,'slide');
}

　Formの側ではText FieldのValueに {record.NAME} のように記述してマグネット型のアイコンをオンにすれば、ビューモデルのレコードが表示されるようになります。同様の作業を他のText Fieldにも実施します。

　［戻る］ボタンや［保存］ボタンはFormにToolbarを置いた上に配置します。textプロパティやiconClsプロパティでボタンの表記やアイコンを設定できます。

　また、それぞれのボタンを押したときの処理は、Gridの場合と同様にEvent Bindingで設定します。［戻る］ボタンでは、Storeへの変更状態を破棄してグリッド表示に戻る処理を実装します。

onCancelButtonTap: function(button, e, eOpts) {
    let store  = this.getViewModel().getStore('MyViewModelStore');
    store.rejectChanges();

    this.getView().animateActiveItem(0,{type:'slide', direction: 'right'});
}

　［保存］ボタンでは、storeへの変更状態を WebAPI側に反映させるために、sync()を行ってグリッド表示に戻るようにします。

onSaveButtonTap: function(button, e, eOpts) {
    let store = this.getViewModel().getStore('MyViewModelStore');
    store.sync();

    this.getView().animateActiveItem(0,{type:'slide', direction: 'right'});
}

　これでデータの一覧表示、詳細表示、保存、キャンセルの機能が一通り実装できました。さらにGridにPaging Toolbar Pluginを追加すると、ページング操作のためのツールバーが表示され、データ全件の閲覧や詳細表示、編集が行えるようになります。