Sencha Touch 历史支持

路由、深链接以及后退按钮 Routing, Deep Linking and the Back Button

Sencha Touch 2 提供完整的历史与深链接的支持，使得我们的 Web 应用拥有以下两点大的好处：

• 浏览器的“后退”按钮在你的应用中有效了，也就是说，虽然按下了后退键，但浏览器并不会立刻刷新，而是仍停留在当前的页面中。
• 可以使用“深链接”了，也就是说，可以分配的一个 url，直达制定的页面(在同一个页面中)。

上述功能综述之，就是为了更好地与原生程序相贴近，务求达到无差别的用户体验——这一点，尤其体现在能够提供“返回键”的 Android 机器上面。

设置路由器 Setting up routes

为你的应用安排的历史记录可以说一点都不困难，主要集中在如何理解的路由器（routes）的概念之上。路由器，简言之，用于定义某一 url 与用户控制器动作之间的映射关系——所谓映射关系，只要在浏览器的地址栏中输入一个地址，对应的控制器便会自动执行某组逻辑动作。咱们看看一个简单的控制器：

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

        config: {
            routes: {
                'products/:id': 'showProduct'
            }
        },

        showProduct: function(id) {
            console.log('showing product ' + id);
        }
    });

通过指定 {@link Ext.app.Controller#routes routes}，当诸如“#products/123” 这样的 url 输入到浏览器时就会通知 Main 控制器。详细点说，就是你的域名是 http://myapp.cpm，然后任何的 http://myapp.com/#products/123、 http://myapp.com/#products/456 或 http://myapp.com/#products/abc 这般的链接，其实终归自动进入到 showProduct 函数的执行环境中去。

当 showProduct 被执行时，其参数就是那个 url 解析而致的。有否注意到路由器中的“:id”部分，因为我们约定，有冒号“:”即表示后面跟的是为一个参数，路由器内部解析好 url 就会得到这个参数然后送入到你所写的函数中去。值得注意的是，该参数总是字符类型（无需多言，url 本身亦是字符类型），于是浏览器得到的“http://myapp.com/#products/456 or http://myapp.com/#products/abc”亦即等于调用 showProduct('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');
        }
    });

第一个路由很简单，前面已经说了说；第二个路由接纳 #products/123/pdf 这样的输入，转到 showProductInFormat 函数，便在在控制台中记录了 showing product 123 in pdf format 这样的输出。另外，id、format 也是按照路由定义中的顺序送入函数中。

当然了，实际中你写的并不像我们这里教学例子的那么简单。大家想该怎么做了吗？就是在控制器中写你的业务逻辑，获取数据啊、更新UI啊的任务……

高级路由器 Advanced Routes

路由器支持通贝符（wildcards）。默认下，通贝符表示不分字符或数字。假设“products/:id/edit”可以接纳“#products/123/edit”但不接纳“#products/a ,fd.sd/edit”，因为后者包含的空格、逗号、句号均不在通贝符涵盖的类型之列。

不过有时我们想自定义复杂一些的规制，——这没问题，我们分配一个配置项对象给 routes 对象而不是字符串，好比如下：

    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);
        }
    });

当然不直接分配方法名称的名称还需要说明你要调用哪个函数，就写在配置项对象的 action 属性中。此外关键的是，条件配置项 {@link Ext.app.Route#conditions conditions} 其 key 为对应的 token，然后 value 为期望的规制。结果，假设一 url 系  http://myapp.com/#file/someFile.jpg，路由器解析后执行 showFile 函数，并送入“someFile.jpg”的参数。

复原状态 Restoring State

前面为大家介绍了定义路由器映射规制的相关知识后，接下来，就是详细讲讲具体的应用了。因为既然是“单页面的应用程序”的缘故，所以我们不轻易地产生一个 url 对应一张页面——如果我们进入首页后，一步步查找分类然后再找到那笔记录，——岂不是很累？所以说，由框架设定一套 url 规制便很有必要了。我们看看下面一个简单的例子，比如还是进入 http://myapp.com/#products/123，我们修改一下 Product 控制器如下：

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

        config: {
            refs: {
                main: '#mainView'
            },

            routes: {
                'products/:id': 'showProduct'
            }
        },

        /**
         * products/:id 路由器的终点。获取一个货物的详细信息然后 push 的新视图。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);
                }
            });
        }
    });

这里的 products/:id 终点就会立刻添加一新视图到主视图中（如非导航类可以是其他的 TabPanel 控件），进而由 model 类（MyApp.model.Product）向服务器获取货物的详细信息。这一过程是异步的过程，所以我们分配了两个回调函数，分别对应成功（渲染 货物 UI）与失败的情形。

Sharing urls across Device Profiles

无论你有多少套<a href="#!/guide/profiles">设备描述 Device Profiles</a>，但一般来说你都会只使用路由结构，也就是说，你在 iPhone 上看到一页面，发觉不错，然后想共享该 url 给别人的话，那么直接把 url 复制给别人即可，无须担心人家的是否手机抑或平板。因此，建议分别在手机子类上写一套路由的配置，然后在平板子类上写一套路由的配置：

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

手机版的显示方式有所不同，于是，我们写出 showProduct 函数的手机版实现：

    Ext.define('MyApp.controller.phone.Products', {
        extend: 'MyApp.controller.Products',

        showProduct: function(id) {
            console.log('showing a phone-specific Product page for ' + id);
        }
    });

    Ext.define('MyApp.controller.tablet.Products', {
        extend: 'MyApp.controller.Products',

        showProduct: function(id) {
            console.log('showing a tablet-specific Product page for ' + id);
        }
    });