フォームのモード(新規か編集か)のラベルを返す。新規作成モードかどうかを返す。}});ビューモデルは、Ext.app.ViewModelを継承し、エイリアス名として「viewmodel.xxx」という形式にします。dataには、ビューモデルで管理する項目を用意します。ここでは、データビューで選択したモデルを格納するselectedRecordプロパティを定義しました。formulasには、dataに設定される値を使って別名の値を用意できます。次にビューとビューモデルを結びつけます。そのために、フォームパネルのクラスを別途作成し、その中で結びつけるようにします。フォームパネルクラス。recordコンフィグ設定時の処理。}});まずはビューポートクラスですが、viewModelコンフィグに、ビューモデルのエイリアス名を指定することでビューモデルを適用できます。データバインディングしたい項目にbindコンフィグを設定していきます。'{selectedRecord}'}上記のように{}の中にビューモデルのdataやformulasで定義した項目を設定すると、そこに値がバインディングされます。bindにオブジェクトリテラルを指定すると、キーの項目に値が設定されます。上記の例だとtitleとrecordコンフィグにバインディングされることになります。文字列を指定した場合はdefaultBindPropertyの値にバインディングされるようになっています。defaultBindPropertyの値はコンポーネントごとに異なります。データバインディングしたい項目が存在しない場合は、configコンフィグを定義することで追加することができます。追加した項目はsetメソッドとupdateメソッドが自動的に用意されます。今回の場合はrecordを追加したので、setRecordとupdateRecordです。recordの値が設定されたり変更されたりした場合に呼び出されます。updateRecordメソッド内で、loadRecordメソッドを呼び出しています。loadRecordを使うと、モデルのフィールド名と入力フィールドのnameコンフィグの値が一致する場合に、その値がフィールドに設定されます(内部的には入力フィールドのsetValueが呼ばれる)。最後に、ビューコントローラでビューモデルに値を設定するようにします。Memo.view.main.Mainのビューコントローラクラス。保存ボタンクリック時の処理。新規作成ボタンクリック時の処理。データビューselectionchangeイベント時の処理。}});ビューモデルは、ビューコントローラのgetViewModelメソッドで取得できます(内部的にはビューのgetViewModelが呼ばれます)。ビューモデルのsetメソッドで値を設定しています。保存処理を更新に対応モデルのphantomの値を使って新規か更新かを判断しています。新規の場合はストアに追加、更新の場合はモデルに値を設定し、最後にcommitします。Memo.view.main.Mainのビューコントローラクラス。保存ボタンクリック時の処理。新規作成ボタンクリック時の処理。データビューselectionchangeイベント時の処理。16:26チュートリアル:ビューモデルを使って、フォームパネルを編集に対応させるTweet広告を非表示にする関連記事2017-01-25チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(modern)今回は、SPA対応のmodern版です。classicとほとんど同じ...2017-01-18チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(2)今回はSPAの続きです。ルーティングで画面を切り替える部分は...2017-01-17チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(1)今回は、メモ一覧とメモ入力フォームを別の画面に分けて、ルー...2017-01-14チュートリアル:モデル、ストアを作成する今回はモデルとストアを作成します。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。