再探 Ext JS 6 (sencha touch/ext升級版) 變化篇 (編譯命令、滾動條、控制層、模型層、路由)

從sencha touch 2.4.2升級到ext js 6，cmd版本升級到6.0之后發生了很多變化

 

首先從cmd說起，cmd 6 中sencha app build package不能使用了，sencha app build native好像也不能用了。

有個好消息就是我們可以用
sencha ant native build
sencha ant package build

這兩個命令，目測和以前的效果差不多了

 

然后再說說ext js 6相對sencha touch 2.4.2的變化

首先最只管的就是在網頁上滾動條變了，如圖

移動端沒有變化，如圖

想要統一他們的顯示效果可能需要花一下心思看看源碼了

然后控制層和模型層發生了變化

以前的控制層是這樣，如圖

現在是這樣，如圖

也就是說views，models，還有圖片上沒顯示的stores現在是和config配置同級了，樓主搞了半天才明白錯在那里

另外模型層也發生了變化

以前是這樣，如圖

現在是這樣，如圖

沒有了config，奇怪的是數據倉庫層，也就是store沒有變化，很奇怪。

另外原來sencha touch如果你重寫了模型和驗證模塊，現在大概是不能用了，需要重新看源碼來寫了，樓主的自定義驗證模塊完全就廢了。

最后就是路由這一塊發生了變化，這個變化挺大的。例如

        this.redirectTo('redirect/newsInfo');
        util.recordLoad(this.getInfo(), config.news.info, {
            NewsID: record.get('id'),
            UserID: config.userMes ? config.userMes.id : 0
        }, record, 'Info');

在sencha touch中，this.redirectTo('redirect/newsInfo');這行代碼會觸發我在main控制層中的視圖切換方法，也就是以下代碼。

showView: function (view, count) {
        //如果正在登錄中，中斷執行
        if (config.isLogin) {
            return;
        }
        var main = this.getMain() || this.getLogin(),
        params = config.tmpParams;
        if (main) {
            //登錄檢測
            //根據config.ckLogin和用戶信息檢測
            if (config.ckLogin[view] && !config.userMes.id) {
                //沒有登錄則跳轉到登錄頁面
                params = params || {};
                //為登錄頁面添加配置，登錄成功后判斷跳轉位置
                params.redirect = view;
                view = 'userLogin';
            }
            if (!view) {
                count = 1;
            }
            if (count && !Ext.isNumber(count) && count.match(/^\+?[1-9][0-9]*$/)) {
                count = Number(count);
            }
            if (count) {
                main.popAndPush(view, count, params);
            } else {
                main.push(view, params);
            }
        }
        delete config.tmpParams;
    }

在這里動態創建了newsInfo視圖，然后通過this.getInfo()方法獲取到視圖對象，最后給這個視圖賦值。

在ext js 6中，這個代碼完全失效了，經過測試發現showView方法的執行順序在util.recordLoad這段代碼之后執行了，也就是說這個時候this.getInfo()方法獲取的是一個null

怎么辦？我們可以這樣處理

 this.redirectTo('redirect/newsInfo',true);

強制觸發路由事件，不過這樣你會發現showView這個方法被觸發了兩次，這樣怎么可以！怎么辦？重寫路由這一塊！代碼如下

  Ext.define('Ext.zh.util.History', {
                override: 'Ext.util.History',
                //因為在redirectTo里面已經觸發了方法，所以這里就不應該再次觸發，直接清空
                handleStateChange: function (token) {
                }
            });
            Ext.define('Ext.zh.app.BaseController', {
                override: 'Ext.app.BaseController',
                redirectTo: function (token) {
                    if (token.isModel) {
                        token = token.toUrl();
                    }
                    //立刻執行路由觸發的方法，沒有做重復觸發判定，使用過程中注意處理
                    Ext.app.route.Router.onStateChange(token);
                    //加入歷史記錄，如果不想url發生變化，可以注釋掉
                    //Ext.util.History.add(token);
                    return true;
                }
            });

這樣勉強達到了sencha touch中的效果，不過問題有來了，在ajax請求數據時，會有問題，代碼如下：

        recordLoad: function (view, url, params, record, ckName) {
            //如果record存在，並且ckName這個字段中有值
            //所以已經請求過了，直接設置值即可
            if (record && record.get(ckName)) {
                view.setRecord(record);
                return;
            }
            //據需求決定用jsonp還是ajax
            //Ext.data.JsonP.request
            Ext.Ajax.request({
                url: url,
                params: params,
                success: function (data) {
                    //處理返回值，轉換為json對象
                    data = Ext.decode(data.responseText)[0] || Ext.decode(data.responseText);
                    //如果模型存在，直接賦值，並且給詳細視圖賦值
                    //如果涉及到修改這一塊，模型存在會省很多事
                    //請看http://www.cnblogs.com/mlzs/archive/2013/05/29/3106241.html
                    if (record) {
                        record.set(data);
                        view.setRecord(record);
                    } else {
                        //如果模型不存在，直接給詳細視圖賦值
                        view.setData(data);
                    }
                }
            });
        }

如果使用navigationView，在第二次進入視圖時會報錯，目前還沒找到解決方法！如圖

最后代碼改成這樣

        config.tmpParams.record = record;
        this.redirectTo('redirect/newsInfo')
        util.recordLoad(config.news.info, {
            NewsID: record.get('id'),
            UserID: config.userMes ? config.userMes.id : 0
        }, record, 'Info');

關鍵代碼  config.tmpParams.record = record;這里通過路由觸發的方法處理，會把record直接初始化給newsInfo視圖，這樣不會出錯，很奇怪。

        recordLoad: function (url, params, record, ckName) {
            //如果record存在，並且ckName這個字段中有值
            //所以已經請求過了，直接設置值即可
            if (record && record.get(ckName)) {
                return;
            }
            //據需求決定用jsonp還是ajax
            //Ext.data.JsonP.request
            Ext.Ajax.request({
                url: url,
                params: params,
                success: function (data) {
                    //處理返回值，轉換為json對象
                    data = Ext.decode(data.responseText)[0] || Ext.decode(data.responseText);
                    record.set(data);
                }
            });
        },

感覺坑還是挺多的，各位有啥好的填坑方法記得告訴我。我會繼續分享我的心得。