Re-explore EXT JS 6 (Sencha touch/ext upgrade) changes (Compile command, scroll bar, control layer, model layer, route)

A lot has changed since Sencha Touch 2.4.2 upgrade to Ext JS 6,cmd version upgraded to 6.0

First from the cmd, cmd 6 in the Sencha app build package can not be used, Sencha app build native seems to be useless.

And the good news is that we can use
Sencha Ant Native Build
Sencha Ant Package Build

These two commands, the visual and the previous effect almost

And then say the change of Ext JS 6 relative Sencha Touch 2.4.2

The first thing to do is to change the scroll bar on the Web page.

There is no change on the mobile side,

Want to unify their display effect may need to spend a bit of time to look at the source code

Then the control layer and the model layer changed.

The previous control layer was like this,

Now that's it,

That is to say, Views,models, and the picture does not show the stores is now and config configuration of the same class, the landlord engaged in half a day to understand the wrong there

In addition, the model layer has changed.

It used to be,

Now that's it,

Without config, it is strange that the Data Warehouse layer, or store, has not changed.

In addition the original Sencha touch if you rewrite the model and validation module, now probably can not use, need to re-read the source to write, the landlord's custom verification module is completely obsolete.

Finally, the route has changed, and the change is quite large. For example

1         this. Redirectto (' Redirect/newsinfo '); 2         Util.recordload (this. GetInfo (), Config.news.info, {3             NewsID:record.get (' id ') ,4             UserID:config.userMes config.usermes.id:05         }, record, ' Info ');

In Sencha Touch, This.redirectto (' Redirect/newsinfo '), this line of code triggers the view switching method that I have in the main control layer, which is the following code.

1ShowView:function(view, count) {2         //If you are logged in, break execution3         if(config.islogin) {4             return;5         }6         varMain = This. Getmain () | | This. GetLogin (),7params =Config.tmpparams;8         if(main) {9             //Login DetectionTen             //based on Config.cklogin and user information detection One             if(Config.cklogin[view] &&!config.userMes.id) { A                 //Skip to login page without login -params = Params | | {}; -                 //Add configuration for login page, determine jump location after successful login theParams.redirect =view; -view = ' Userlogin '; -             } -             if(!view) { +Count = 1; -             } +             if(Count &&!) Ext.isnumber (count) && Count.match (/^\+?[ 1-9][0-9]*$/)) { ACount =Number (count); at             } -             if(count) { - Main.popandpush (view, count, params); -}Else { - Main.push (view, params); -             } in         } -         DeleteConfig.tmpparams; to}

The Newsinfo view is created dynamically here, then the view object is obtained through the This.getinfo () method, and the view is finally assigned a value.

In Ext JS 6, this code is completely invalid, after the test found that the ShowView method execution sequence after util.recordload this code, that is, this time the This.getinfo () method gets a null

What to do? We can handle this.

This.redirectto (' Redirect/newsinfo ', true);

Force the triggering of the routed event, but you will find that the ShowView method has been triggered two times, so how can it be! What to do? Rewrite the route this piece! The code is as follows

1Ext.define (' Ext.zh.util.History ', {2Override: ' Ext.util.History ',3                 //because the method has been triggered in the Redirectto, it should not be triggered again and emptied directly4Handlestatechange:function(token) {5                 }6             });7Ext.define (' Ext.zh.app.BaseController ', {8Override: ' Ext.app.BaseController ',9Redirectto:function(token) {Ten                     if(Token.ismodel) { Onetoken =Token.tourl (); A                     } -                     //immediately execute the route trigger method, do not do a duplicate trigger decision, using the process of attention to processing - Ext.app.route.Router.onStateChange (token); the                     //Add a history and if you don't want the URL to change, you can comment out -                     //Ext.util.History.add (token); -                     return true; -                 } +});

This barely achieves the effect of Sencha touch, but there is a problem with the AJAX request data, the code is as follows:

Recordload:function(view, URL, params, record, ckname) {//if the record exists and Ckname has a value in this field            //so it has been requested, directly set the value can be            if(Record &&Record.get (Ckname))                {View.setrecord (record); return; }            //the need to decide whether to use JSONP or Ajax            //Ext.data.JsonP.requestExt.Ajax.request ({url:url, Params:params, success:function(data) {//processing return values, converting to JSON objectsdata = Ext.decode (Data.responsetext) [0] | |Ext.decode (Data.responsetext); //assign a value directly if the model exists, and assign a value to the detailed view                    //if it involves modifying this piece, the model will save a lot of things.                    //please look at http://www.cnblogs.com/mlzs/archive/2013/05/29/3106241.html .                    if(record) {record.set (data);                    View.setrecord (record); } Else {                        //assign a value directly to the detailed view if the model does not existview.setdata (data);        }                }            }); }

If you use Navigationview, you will get an error when you enter the view for the second time, there is no workaround!

The last code changed to this.

        Config.tmpParams.record = record;         this. Redirectto (' Redirect/newsinfo ')        util.recordload (config.news.info, {            NewsID:record.get (' id '),            ? config.usermes.id:0        ' Info ');

The key code Config.tmpParams.record = record, which is handled by a route-triggered method, initializes the record directly to the Newsinfo view, so it's not an error, it's strange.

1Recordload:function(URL, params, record, ckname) {2             //if the record exists and Ckname has a value in this field3             //so it has been requested, directly set the value can be4             if(Record &&Record.get (Ckname)) {5                 return;6             }7             //the need to decide whether to use JSONP or Ajax8             //Ext.data.JsonP.request9 Ext.Ajax.request ({Ten Url:url, One Params:params, ASuccessfunction(data) { -                     //processing return values, converting to JSON objects -data = Ext.decode (Data.responsetext) [0] | |Ext.decode (data.responsetext); the record.set (data); -                 } -             }); -},

Feel the pit is still quite a lot of, you have what good pits method remember to tell me. I will continue to share my experience.

Re-explore EXT JS 6 (Sencha touch/ext upgrade) changes (Compile command, scroll bar, control layer, model layer, route)