Sencha Touch - 历史支持

Sencha Touch历史支持 - 从基本概念到高级概念，从简单和简单的步骤学习Sencha Touch，其中包括概述，环境，命名约定，架构，MVC解释，第一个应用程序，构建应用程序，迁移步骤，核心概念，数据，主题，设备配置文件，依赖关系，环境检测，事件，布局，历史和支持，上传和下载，查看组件，打包，本机IOS，API。

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://img01.yuandaxia.cn/Content/img/tutorials/sencha_touch/，则将调用函数showLogin.

我们可以在URL中提供参数，并根据函数可以调用的特定参数.例如，如果URL是https://img01.yuandaxia.cn/Content/img/tutorials/sencha_touch/，则将调用另一个函数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 profileExt.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 profileExt.define('MyApp.controller.tablet.Main, {   extend: 'MyApp.controller.Main,showLogin: function() {      Ext.Msg.alert('This is the login page for tablet profile');   }});

如示例所示，我们有一个主控制器具有showLogin功能，我们有两个不同的配置文件(手机/平板电脑).两个配置文件都有showLogin函数，其中包含特定于配置文件的不同代码.