Sencha Touch - 歷史支援

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 函式的主控制器，並且有兩個不同的配置檔案（手機/平板電腦）。這兩個配置檔案都具有 showLogin 函式，但程式碼不同，分別特定於各自的配置檔案。

透過這種方式，我們可以使用其特定功能在多個配置檔案裝置中共享相同的 URL。

列印頁面