ルーティングは、ナビゲーション履歴をコントローラーに関連付けることができるExt JS 5の新機能です。 「戻る/進む」ボタンはブラウザインターフェースの主要部分の1つであり、Ext JS 5では、単一ページアプリケーションでのナビゲーションが非常に簡単になりました。
Ext JS 5のルーティング
Ext JSでは常に
Ext.util.Historyクラスを使用してナビゲーション履歴を処理できますが、Ext JS 5ではこのプロセスをさらに簡単かつ柔軟にしました。 ルーターは、パラメーターサポートとルート実行制御を備えたハッシュトークンとコントローラーメソッドの通信の簡単な構成を提供します（
Ext.util.Historyは舞台裏で使用されます）。 簡単な例を見てみましょう：
Ext.define('MyApp.controller.Main', { extend : 'Ext.app.Controller', routes : { 'home' : 'onHome' }, onHome : function() {} });
routesオブジェクトでは、
ホームキーはハッシュであり、
onHomeはコントローラーを通過するときに実行されるコントローラーのメソッドです（例：
localhost#home localhost#home ）。 コントローラー内のハッシュを変更するには、
redirectToメソッドを使用できます。
this.redirectTo('home');
これにより、URLハッシュが
#homeに変更され、次に
onHomeメソッドが呼び出されます。コンテキストは、ルートが定義されたコントローラー
MyApp.controller.Mainのインスタンスになります。 複数のコントローラーに同じルートが登録されている場合、実行順序はアプリケーションコントローラーが登録されている順序（
コントローラーの配列）と同じになります。
ハッシュトークンとパラメーター
ハッシュトークンにはパラメーターを含めることができ、ルーターはそれらをパラメーターとしてコントローラーメソッドに渡します。 ハッシュは
'＃user / 1234'のようになります（
1234はユーザーIDです）。 このハッシュと一致させるために、コントローラーは次のように構成されます。
Ext.define('MyApp.controller.Main', { extend : 'Ext.app.Controller', routes : { 'user/:id' : 'onUser' }, onUser : function(id) {} });
パラメータを使用してルートを設定する場合、パラメータ名の前にコロンが配置されます。 この場合、それは
idです。 ルーターは渡された値を受け取り、それを
onUserメソッドに
渡します。 メソッドに渡される引数の順序は、ルートで定義されたパラメーターの順序と一致します。
正規表現を使用して、ハッシュパラメーターの一致を制御できます。 上記の例では、IDには数字のみを含めることができ、残りの値は一致しないはずです。
条件構成はこれに使用されます：
Ext.define('Fiddle.controller.Main', { extend : 'Ext.app.Controller', routes : { 'user/:id' : { action : 'onUser', conditions : { ':id' : '([0-9]+)' } } }, onUser : function(id) {} });
この例は2つのことを示しています。ルートは
アクションキーがコントローラーメソッドであるオブジェクトであり、
条件はパラメーターと正規表現文字列を持つオブジェクトです。 正規表現が文字列に記述されている理由は、ルーターがルートパラメーターに基づいてメイン表現を作成するためです。
条件構成により、デフォルトの正規表現をオーバーライドできます。 文字列パラメーターのデフォルトの正規表現は
'（[％a-zA-Z0-9 \\-\\ _ \\ s、] +）'です。
一致する
ものがないルート遷移を処理するために、
unmatchedrouteイベント
が存在します。 そのハンドラーは、アプリケーションとコントローラーの両方でハングさせることができます。 たとえば、コントローラーに対して：
Ext.define('Fiddle.controller.Main', { extend : 'Ext.app.Controller', listen : { controller : { '*' : { unmatchedroute : 'onUnmatchedRoute' } } }, onUnmatchedRoute : function(hash) {} });
ajaxリクエストなどの非同期アクションの後で、それを停止または続行するために、ルートに沿って遷移をキャッチする必要がある場合があります。 これを行うには、ルートで
beforeキーが使用されます。 以下は、ajaxリクエストの後にルートの実行が続く例です。
Ext.define('Fiddle.controller.Main', { extend : 'Ext.app.Controller', routes : { 'user/:id' : { action : 'onUser', before : 'beforeUser', conditions : { ':id' : '([0-9]+)' } } }, beforeUser : function(id, action) { Ext.Ajax.request({ url : '/user/confirm', params : { userid : id }, success : function() { action.resume(); }, failure : function() { action.stop(); } }); }, onUser : function(id) {} });
beforeUserメソッドは、
onUserに似た
id引数と、ルートを制御する
resumeおよび
stopメソッドを持つ
actionを受け入れます。
action.resume（）メソッド
はルート
を継続し、非同期化できるようにし、
action.stop（）メソッド
は実行されないようにします。
trueが stopメソッドに渡されると、すべてのルートが停止します。
Ext JSアプリケーションはより大きく、より複雑になり、複数のハッシュトークンを同時に処理する必要が生じる場合があります。 Ext JS 5では、この機能が実装されていますが、各ハッシュトークンは独自のサンドボックスで個別に処理されます。 つまり、
action.stopメソッドに
trueを渡すことで1つのルートをキャンセルすると、このハッシュトークンによってのみルートがキャンセルされ、残りは実行を継続します。 各トークンは垂直線で分割する必要があります。
#user/1234|message/5ga
ルータはハッシュを分割し、トークン
「user / 1234」と
「message / 5ga」を受信します 。 まず、
ユーザートークンを処理し、それに一致するすべてのルートを見つけて実行します。 このトークンに一致するルートが見つからない場合、unmatchedrouteイベントが
発生します。 次に、ルーターは
メッセージトークンに移動し、同様に、関連するルートを見つけます。 見つからない場合、unmatchedrouteイベントが
発生します。
おわりに
ExtJS 5の新しいルーターは設定が簡単で、ブラウザーの履歴を簡単に処理できますが、複雑なアプリケーションの要件を満たすために柔軟性と強力さを維持しています。 Ext JS 5は、MVC + VM、双方向データバインディング、その他の新機能とともに、エンタープライズアプリケーションの優れたフレームワークです。