}});すこしメソッド名を変えてます(これは私の感覚的なものですw)。編集用に下記を追加しました。'showRegist':idという部分がメモIDに対応します。このようにコロンを付けて定義することで、動的な値に対応することができるようになっています。:idの値は、showRegistの引数に渡されます。:idのような値が複数ある場合、第1引数、第2引数、・・・と順番に渡されます。あとはshowRegistメソッド内で受け取るようにしました。最終的には下記の部分でパラメータとしてメモIDが渡っていきます。params);fireEventというのは、イベントを発生させるためのメソッドです。これまでlistenersでイベント発生時の処理を設定してきましたが、自前のイベントを追加したい場合などは、このfireEventを使ってイベント発生させます。今回は、画面が切り替わったらshowscreenというイベントを発火させることで、SPAとして画面が切り替わった場合にはこのイベントが発生するというルールを定義付けました。一覧画面から登録画面へ遷移する一覧画面から登録画面に遷移する部分を実装してみます。イメージとしては、↓のようなかんじです。一覧画面に新規作成ボタンを設定して、それをクリックしたら新規登録画面へ遷移する。メモをダブルクリックしたら編集画面に遷移する。メモ一覧パネルクラス。メモ一覧データビュークラス。メモ一覧のビューコントローラクラス。新規作成ボタンクリック時の処理。データビューitemdblclickイベント時の処理。}});新規作成ボタンを設置してクリックしたらonClickCreateButtonが呼ばれるようにしました。あと、データビューのitemdblclickイベントが発生したらonItemDblClickが呼ばれるようにしています。それらのメソッドではredirectToを呼び出すようにしています。これによって指定されたハッシュにURLを切り替えることができます。第2引数に設定しているtrueですが、これは強制するかどうかを示すフラグです。現在のURLが、既にredirecToで指定されたURLになっている場合、第2引数がfalseだとルーティング部分の処理が発生しません。同じURLであったとしても画面切り替えの処理をしてほしい場合はtrueを設定します。私は基本的にtrueを設定しておけば良いと思っています。登録画面の処理を実装あとは登録画面の実装です。ここでは編集の場合は画面表示のタイミングで、メモのデータをロードするというかんじにします。他は以前とだいたい同じです(プロパティ名とかは適宜変えてます)。メモ登録フォームパネルクラス。recordコンフィグ設定時の処理。メモ登録のビューコントローラクラス。showscreenイベント時の処理。保存ボタンクリック時の処理。メモ登録のビューモデルクラス。フォームのモード(新規か編集か)のラベルを返す。}});showscreenイベント時にonShowScreenが実行されるようにして、その中でデータを取得するようにしています。他の画面でも、画面表示時の処理は同じように定義できるようになりました(私はよくこのようにしておきます)。他は大きく変えていません。保存したときに完了メッセージを出して、一覧画面に戻るようにしたぐらいですかね。ここではredirectTo('list')で戻るようにしていますが、history.backでも良いと思います。defaultTokenを設定しておく最後に、Ext.app.ApplicationのdefaultTokenを設定しておきます。アプリケーションクラス。'list'});これを付けておくと、http://localhost:1841にアクセスした場合にhttp://localhost:1841/#listにリダイレクトしてくれます。デフォルトのルートを設定できるわけです。最終的に、↓のようになりました(スタイルは調整しています)。当初の予定はクリアできているかと思います。ちなみに、実際の案件ではこれだけでは駄目で、ルーティングに存在しないURLにアクセスされた場合への対応を入れたり、もっと汎用的なルーティング処理に変更したりと考えることは増えていきます。言って手間のかかる対応です。SPAにすることで、ユーザの操作感が各段に向上するのでお勧めです。次回はストアのプロキシを変更するのと、削除できるようにする予定です。13:54チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(2)Tweet広告を非表示にする関連記事2017-01-25チュートリアル:削除処理の実装(modern)今回はメモを削除できるようにします。削除だけだと、あまりに...2017-01-25チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(modern)今回は、SPA対応のmodern版です。classicとほとんど同じ...2017-01-22チュートリアル:一覧画面を作成する(modern)これからclassicで作った画面の、modern版を作成していきます。...2017-01-20チュートリアル:ストアのプロキシを変更する今回はストアのプロキシをローカルストレージに変更します。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。