sencha touch 路由学习

Sencha touch 的路由，深层链接以及后退按钮

 

Sencha touch自带的历史记录和深层链接，他可以提供一下两个好处

1.能帮助你在不同的页面之间来回的切换而不刷新缓存。

2.深度链接可以让你的用户发送一个链接到应用程序的任何部分,并有其他加载正确的页面

 

结果是一个应用程序,该应用程序感觉更符合用户期望从本地应用,尤其是在Android设备完全支持内置的后退按钮。

 

建立历史支持您的应用程序非常简单,是围绕路由的概念。路由是一个简单的url和控制器之间的映射操作:当检测到某种类型的url地址栏,自动调用对应的控制器动作。

 

设置路由

设置历史支持您的应用程序是非常简单的，是围绕着路由的概念。路线是一个简单的URL之间的映射和控制器动作 - 每当某种类型的URL检测到对应的控制器动作会自动被调用，在地址栏中。让我们来看看一个简单的控制器：

Ext.define('MyApp.controller.Products',{    extend:'Ext.app.Controller',     config:{        routes:{'products/:id':'showProduct'}},     showProduct:function(id){        console.log('showing product '+ id);}});

通过指定上述路由，主控制器将被收到，每当在浏览器的URL看起来类似“＃products/123”。例如，如果您的应用程序部署到任何网址http://myapp.com，看起来像http://myapp.com/＃products/123，http://myapp.com/＃products/456或http： / / myapp.com /＃产品/ abc将自动使您的展示产品的功能，被称为。

当展示产品的功能，被称为这种方式，它是通过解析的URL的'id'令牌。这是因为我们使用的'身份证'的路线-每当路由中包含“：”它会尝试将这些信息的URL，并把它传递给你的函数。请注意，这些解析令牌始终为字符串（因为网址总是字符串本身），所以击中像'http://myapp.com/＃products/456'的一个途径，是调用展示产品（'456'）的相同。

您可以指定任意数量的路线和路线都可以有任意数量的令牌 - 例如：

Ext.define('MyApp.controller.Products',{    extend:'Ext.app.Controller',     config:{        routes:{'products/:id':'showProduct','products/:id/:format':'showProductInFormat'}},     showProduct:function(id){        console.log('showing product '+ id);},     showProductInFormat:function(id, format){        console.log('showing product '+ id +' in '+ format +' format');}});

第二个途径接受的URL，如＃products/123/pdf，这将借道的showProductInFormat功能和控制台日志显示产品的PDF格式123“。请注意，参数被传递到函数的顺序出现在路由定义。

当然，你的控制器功能可能不会其实只是登录到控制台的消息，它可以做任何事情，你的应用程序所需要的 - 无论是获取数据，更新UI或其他任何东西。

高级路线

默认情况下，路由中的通配符匹配任何字母和数字的序列。这意味着，路径为“/ ID /编辑”匹配网址“＃products/123/edit”，但不是“＃产品/ fd.sd /编辑” - 第二个是包含多个字母，不'T资格（空格，逗号，点）。

虽然有时我们想要的路线，以便能够匹配URL这样的，例如，如果一个URL包含了文件名 ​​，我们可能希望能够实现自己到一个单独的标记。要做到这一点，我们可以通过一个配置对象到我们的路线：

Ext.define('MyApp.controller.Products',{    extend:'Ext.app.Controller',     config:{        routes:{'file/:filename':{                action:'showFile',                conditions:{':filename':"[0-9a-zA-Z\.]+"}}}},//opens a new window to show the file    showFile:function(filename){        window.open(filename);}});

因此，而不是一个操作字符串，我们现在有一个配置对象，它包含一个“行动”属性。此外，我们还增加了一个条件：文件名 ​​令牌的配置，它告诉匹配任何数字和字母的顺序，以及句号（'。'）。这意味着我们的路线将匹配的URL，如http://myapp.com/＃文件/ someFile.jpg的，通过“someFile.jpg'作为参数控制器的showFile功能的。

还原状态

历史和深厚的连接的一大挑战是，你需要能够恢复完整的UI的应用程序，如果用户导航到的深链接的网页，他或她自己的状态。这有时可能会非常棘手，但我们付出的代价，让生活更美好为用户。

让我们来简单的例子，这样的URL http://myapp.com/＃products/123的基础上加载一个产品。让我们更新我们的产品从上面的控制器：

Ext.define('MyApp.controller.Products',{    extend:'Ext.app.Controller',     config:{        refs:{            main:'#mainView'},         routes:{'products/:id':'showProduct'}},/**     * Endpoint for 'products/:id' routes. Adds a product details view (xtype = productview)     * into the main view of the app then loads the Product into the view     *     */    showProduct:function(id){var view =this.getMain().add({            xtype:'productview'});MyApp.model.Product.load(id,{            success:function(product){                view.setRecord(product);},            failure:function(){Ext.Msg.alert('Could not load Product '+ id);}});}});

在此，我们的产品/ ID的URL端点，在不久加入到我们的应用程序的主视图（这可能是一个TabPanel中或其他容器）的结果，然后使用我们的的产品的模型（MyApp.model.Product）获取产品从服务器。我们增加了一个回调函数，然后填充产品的详细视图刚装入的产品。我们立即呈现UI（而不是只渲染它的产品已经被加载），以便我们为用户提供视觉反馈，尽快。

当涉及到恢复状态的深联的观点，每个应用程序都需要不同的逻辑。例如，在厨房水槽需要恢复状态，其NestedList的导航，以及使正确的观点，对于给定的URL。要看到这是如何实现在手机和平​​板型材检查出showView的功能在厨房水槽的应用程序/控制器/电话/ Main.js和应用程序/控制器/平板电脑/ Main.js的文件。

跨设备配置文件的共享网址

在大多数情况下，你会希望你的设备配置文件之间共享相同的路由结构。这样，用户使用您的手机版本可以发送其当前的URL，使用Tablet的朋友，并希望他们的朋友将采取正确的地方在平板应用程序。这通常意味着它是在超类中定义的路由配置的手机和平板电脑专用的控制器：

Ext.define('MyApp.controller.Products',{    extend:'Ext.app.Controller',     config:{        routes:{'products/:id':'showProduct'}}});

现在，在您的手机具体的子类，你就可以实现展示产品功能，给一个电话给定的产品：

Now in your Phone-specific subclass you can just implement the showProduct function to give a Phone-specific view for the given product:

Ext.define('MyApp.controller.phone.Products',{    extend:'MyApp.controller.Products',     showProduct:function(id){        console.log('showing a phone-specific Product page for '+ id);}})

在您的Tablet特定的子类只是做同样的事情，这个时候显示出平板电脑专用视图：

Ext.define('MyApp.controller.tablet.Products',{    extend:'MyApp.controller.Products',     showProduct:function(id){        console.log('showing a tablet-specific Product page for '+ id);}});

这条规则也有一些例外，通常做链接导航状态。厨房的水槽例如手机和平板电脑的具体意见 - 两个配置文件中，我们使用了NestedList导航，但而对平板NestedList的左边缘的屏幕，一个充满屏幕的电话。为了使如预期般在手机上，每次我们在NestedList导航的后退按钮工作，我们把新的URL的历史，这意味着电话特定的控制器有一个额外的路线。退房的应用程序/控制器/电话/ Main.js的文件为这样的一个例子。

 

config: {  

    <strong>mainview</strong>: {   //预定义一个组件在这里  

        xtype: 'mainview',  

        autoCreate: true  

    },  

    control: {},  

    //路由部分编写  

    routes: {  

          'main': 'showMainview'//当#main的时候进行url跳转并且执行函数  

    }  

},  

showMainview: function(){  

    Ext.Viewport.setActiveItem(this.getMainview() );  

}  

当在控制器的函数中执行redirectTo('main')方法时，则会跳转到index.html#main，并且会执行相应的函数。实践证明，用路由去控制页面的跳转高效有力，而且结构清晰，值得推荐！！当然路由跳转也是可以传参的，而且貌似很有用，做到数据层的时候估计会用到。