sencha touch 路由(routes}浅谈

Sencha Touch comes with fully history and deep-linking support. This gives your web applications the following two important benefits:  The back button works inside your apps, helping you to navigate correctly and quickly between screens without refreshing the page Deep-linking enables your users to send a link to any part of the app and have other load the right page The result is an application that feels much more in tune with what users expect from native apps, especially on Android devices which fully support the built-in back button.

煎茶触摸配有充分的历史和深度链接支持。这使你的web应用在以下两个重要的好处：“后退”按钮可以在你的应用程序，帮助你正确导航和屏幕之间快速无需刷新页面深联使您的用户发送一个链接的应用程序的任何部分，有其它负载右页的结果是一个应用程序，感觉更合拍，与用户期望从本地应用程序，尤其是在Android设备上全力支持内置的后退按钮。

以上是官方解释，以及谷歌翻译。

下面以一个实例来解说

实例下载地址：http://download.csdn.net/detail/jy02534655/5480079

如果使用adt-eclipse来打包应用

那么启动的关键代码就是

        super.loadUrl("file:///android_asset/www/index.html",5000);

如果你在项目中配置路由，你可以这样写

Ext.define('app.controller.Main', {
    extend: 'Ext.app.Controller',
    config: {
        views: ['Home'],
        refs: {
            main: 'cardPanel'
        },
        routes: {
            '': 'appStart'
        }
    },
    appStart: function () {
        this.getMain().pushView('userInfo', '个人中心');
    }
});

基本过程是这样的，当index.html页面启动的时候，路由中注册了 '': 'appStart'所以按照规则他会执行appStart这个方法。

appStart做什么是由你来决定的，也就是说路由不能切换页面，掌控权在你手中。你什么都不做也是可以的

实际上我的代码是这样的

 

Ext.define('app.controller.Main', {
    extend: 'Ext.app.Controller',
    config: {
        views: ['Home'],
        refs: {
            main: 'cardPanel',
            imgList: 'imgList',
            showView: 'button[action=showView]'
        },
        routes: {
            'userRegister': 'userRegister',
            'login': 'userLogin',
            'userInfo': 'showUserInfo',
            'imgType': 'showImgType',
            'imgList/:id': 'showImgList',
            'home': 'showHome'
        },
        control: {
            showView: {
                tap: function (t, value) {
                    this.redirectTo(t.config.goto);
                }
            }
        }
    },
    showUserInfo: function () {
        this.getMain().pushView('userInfo', '个人中心');
    },
    /*跳转到注册页*/
    userRegister: function () {
        this.getMain().pushView('userRegister', '注册');
    },
    userLogin: function () {
        this.getMain().popAllAndPush('userLogin', '登录');
    },
    //跳转到首页
    showHome: function () {
        this.getMain().popAllAndPush('home', '简单相册');
    },
    /*跳转到照片类型页*/
    showImgType: function () {
        var store = Ext.getStore('imgType');
        store.setProxy({ url: app.app.postUrl + 'PictureList.ashx' });
        if (store.getCount() < 1) {
            store.load(function (records, operation, success) { },
            this);
        }
        this.getMain().pushView('imgType', '相册类型');
    },
    /*跳转到图片列表页*/
    showImgList: function (id, title) {
        this.getMain().pushView('imgList', '相册详细');
        this.getMain().showMessage('正在努力加载中...');
        //        console.log(this.getImgList());
        var me = this;
        Ext.Ajax.request({
            url: app.app.postUrl + 'PicInfoByType.ashx',
            params: {
                ParentID: id
            },
            success: function (response) {
                var items = [];
                var result = Ext.decode(response.responseText);
                for (j = 0; j < result.length; j++) {
                    items.push({
                        xtype: 'image',
                        cls: 'my-carousel-item-img',
                        src: result[j].ImgUrl
                    });
                }
                me.getImgList().add(items);
                me.getMain().hideMessage();
            }
        });
    }
});

以上，当你的url为index.html#userRegister就会呗路由截获，让他执行你指定的方法。当然路由也是可以传参的，这个请自己看看api。另外只建议穿一些简单的参数，不建议传中文参数，那需要你先编码再解码。

如果你需要传参数的话你可以这样

            imgType: {
                itemtap: function (list, index, target, record, e) {
                    this.redirectTo('imgList');
                    app.app.showListByParams('imgList', { type: record.data.id }, true);
                }
            }

绕过路由...以上代码示例中没有的

this.redirectTo就是通过js来改变url了，相当于你直接访问index#imgList

另外history.back();就是返回上一个你使用过的路由了，值得注意的是：他同样会激活你指定的路由，所以在页面切换的时候你需要考虑到这一点

另外官方说能很的支持安卓中的返回键，其实我觉得事件应用中有些问题，至少在我的示例中便是如此。

所以在这方面你还是需要通过pg来监控返回键的

说起来路由好像没啥用一样...

其实不是的，它可以让你把所有的页面跳转逻辑单独放一个控制层中，然后其他控制层放你想放的，比较符合mvc原则。

另外他最大的作用就是可以在做推送的时候直接能跳转到指定的页面，好像这也是他唯一的价值了。至于应该怎么做，我还没用到那里...期待有人能发掘他的更多作用

如果不打包成app，用web模式的话好像用处还算大...