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模式的話好像用處還算大...