初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2017-01-15チュートリアル:ビューモデルを使って、フォームパネルを編集に対応させるExtJS今回は、保存しているメモを編集できるようにしたい、という内容です。編集したいメモを選択すると入力フォームに転記されて保存ボタンを押すと編集内容が反映される、といったかんじにしようと思います。これだけだと、メモを選択したあとに、新規登録に戻す方法を決めていません。今回は新規登録に切り替えるボタンを別途配置することにします。データビューを選択したときの処理を実装まずは、データビューでメモを選択する部分です。データビュー(Ext.view.View)は、選択状態になるとselectionchangeというイベントが発生します。このイベントが発生したときに、処理が実行されるようにしてみましょう。Memo.view.main.Mainのビューコントローラクラス。保存ボタンクリック時の処理。データビューselectionchangeイベント時の処理。console.log('selectionchangeイベントが発生したよ。'onSelectionChangeDataView'と設定することで、イベント発生時にonSelectionChangeDataViewが呼ばれるようにしました。API(http://docs.sencha.com/extjs/6.2.1/classic/Ext.view.View.html#event-selectionchange)を見ると、引数について確認できます。ビューモデルを使ってフォームパネルに転記するフォームパネルへの転記は、ビューモデルを使うことにします。ビューモデルを使うことで、ビューモデルとビューの間に双方向データバインディングを実現でき、ビューモデルに値を設定することでビューに反映することができるようになります。ビューモデルを用意します。