Sencha Touch-历史记录支持

📌 相关文章

📜 Sencha Touch-历史记录支持

📅 最后修改于: 2020-10-19 03:06:20 🧑 作者: Mango

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函数，并具有特定于该配置文件的不同代码。