Ext JS 5でルーティングを使用する方法

ルーティングは、ナビゲーション履歴をコントローラーに関連付けることができる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'); //  http://localhost#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、双方向データバインディング、その他の新機能とともに、エンタープライズアプリケーションの優れたフレームワークです。