SenchaTouch-履歴サポート

Sencha Touchには、完全な履歴サポートとディープリンク機能が付属しています。

最もシンプルな戻るボタン機能を備えているため、ユーザーはページやアプリケーションを更新しなくても、画面間を移動できます。

また、ユーザーが任意のURLに移動するのに役立つルート機能も提供します。ブラウザウィンドウで提供されたURLに基づいて、特定の関数を呼び出して特定のタスクを実行します。

戻るボタンの機能については、次の例をご覧ください。

この例は、リスト内のリストにすぎないネストされたリストを示しているため、リストアイテムのいずれかをクリックすると、別のリストが開き、画面の上部に戻るボタンが表示されます。

完全なコードベースについては、ビューコンポーネントセクションでネストされたリストを確認できます。

ルーティング

ルートの最も簡単な例

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

上記の例では、ブラウザのURLがhttps://myApp.com/#loginの場合、関数showLoginが呼び出されます。

URLにパラメーターを指定し、特定のパラメーターに基づいて関数を呼び出すことができます。たとえば、URLがhttps://myApp.com/#user/3の場合、別の関数userIdが呼び出され、特定のIDを関数内で使用できます。

事前ルーティング

上記のルートの記述方法を使用すると、コンマ、空白スペース、特殊文字などを含む事前パラメータがある場合がありますが、機能しません。この問題を解決するために、Sencha touchは、パラメーターが受け入れる必要のあるデータのタイプの条件を指定できる条件付きルーティングを提供します。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }      
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }     
   }
});

したがって、上記の例のように、URLパラメーターとして許可する必要があるデータのタイプを明確に示す条件で正規表現を指定しました。

異なるデバイスプロファイル間で同じURLを共有する

Sencha touchはデバイスプロファイルを提供するため、同じアプリケーションコードを複数のデバイスで使用できるため、プロファイルが異なれば、同じURLに対して機能が異なる可能性があります。

この問題を解決するために、Sencha touchを使用すると、メインコントローラーにルーティングを記述し、呼び出された関数をプロファイル固有のプロファイルとともにすべてのプロファイルに書き込むことができます。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

例が示すように、showLogin機能を持つ1つのメインコントローラーがあり、2つの異なるプロファイル（電話/タブレット）があります。両方のプロファイルには、プロファイルに固有の異なるコードを持つshowLogin関数があります。

このようにして、特定の機能を持つ複数のプロファイルデバイス間で同じURLを共有できます。