Sencha Touch Ext. Carousel Switch Bug

Keywords: Android Firefox Google PHP

There's nothing more frustrating than testing and working applications, only opening it one day and finding it... doesn't work. This is Sencha. Touch developers will have recent experience because the latest Chrome update (Chrome 43) has caused some errors in the Encha Touch application. This problem arises if you try to view the latest system Web views on applications or Android devices in Chrome browsers.

When I loaded a Sencha in Chrome on my desktop computer In Touch applications, I first noticed this problem, and the scrollable part of my interface was lost. I have to scroll to show it. The developers reported a series of problems, and I believe my application has more problems.

How to fix Chrome 43 error

So of course, I'm turning to Google. Too long ago, I found out this From Mitchell Simoens'statement. He listed the problems caused by Chrome 43 and some fixes for EXT JS and Encha Touch. Sencha Touch fixes, in particular, add the following to app.js (Ext.application ():

Ext.define('Override.util.PaintMonitor', {
    override : 'Ext.util.PaintMonitor',

    constructor : function(config) {
        return new Ext.util.paintmonitor.CssAnimation(config);
    }
});

Ext.define('Override.util.SizeMonitor', {
    override : 'Ext.util.SizeMonitor',

    constructor : function(config) {
        var namespace = Ext.util.sizemonitor;

        if (Ext.browser.is.Firefox) {
            return new namespace.OverflowChange(config);
        } else if (Ext.browser.is.WebKit || Ext.browser.is.IE11) {
            return new namespace.Scroll(config);
        } else {
            return new namespace.Default(config);
        }
    }
});

And the following to your app.scss file to solve the problem of loading the tuner will not rotate:

@keyframes x-loading-spinner-rotate {
  0%{     -ms-transform: rotate(0deg); transform: rotate(0deg); }
  8.32%{  -ms-transform: rotate(0deg); transform: rotate(0deg); }
 
  8.33%{  -ms-transform: rotate(30deg); transform: rotate(30deg); }
  16.65%{ -ms-transform: rotate(30deg); transform: rotate(30deg); }
 
  16.66%{ -ms-transform: rotate(60deg); transform: rotate(60deg); }
  24.99%{ -ms-transform: rotate(60deg); transform: rotate(60deg); }
 
  25%{    -ms-transform: rotate(90deg); transform: rotate(90deg); }
  33.32%{ -ms-transform: rotate(90deg); transform: rotate(90deg); }
 
  33.33%{ -ms-transform: rotate(120deg); transform: rotate(120deg); }
  41.65%{ -ms-transform: rotate(120deg); transform: rotate(120deg); }
 
  41.66%{ -ms-transform: rotate(150deg); transform: rotate(150deg); }
  49.99%{ -ms-transform: rotate(150deg); transform: rotate(150deg); }
 
  50%{    -ms-transform: rotate(180deg); transform: rotate(180deg); }
  58.32%{ -ms-transform: rotate(180deg); transform: rotate(180deg); }
 
  58.33%{ -ms-transform: rotate(210deg); transform: rotate(210deg); }
  66.65%{ -ms-transform: rotate(210deg); transform: rotate(210deg); }
 
  66.66%{ -ms-transform: rotate(240deg); transform: rotate(240deg); }
  74.99%{ -ms-transform: rotate(240deg); transform: rotate(240deg); }
 
  75%{    -ms-transform: rotate(270deg); transform: rotate(270deg); }
  83.32%{ -ms-transform: rotate(270deg); transform: rotate(270deg); }
 
  83.33%{ -ms-transform: rotate(300deg); transform: rotate(300deg); }
  91.65%{ -ms-transform: rotate(300deg); transform: rotate(300deg); }
 
  91.66%{ -ms-transform: rotate(330deg); transform: rotate(330deg); }
  100%{   -ms-transform: rotate(330deg); transform: rotate(330deg); }
}

After implementing these patches, it seems to have broken my iOS version (possibly a native Android version, which I have never tried). I've never been able to figure out why (because there were no errors), but when I add these two codes to my application, my launch () function will never be triggered, which means that I'm permanently stuck on the flash screen.

With more digging, I found that This solution is from Lee Boonstra (Who is also a Sencha employee) seems to be doing the job. The credibility of this solution has also come. Trevor Brindle He Compose A very useful blog post about this mistake.


Instead of directly adding overlays to app.js, we add them as utility files and require them in app.js. To implement this solution, you need to create two files in a folder called util. They should be like this:

Application / UTIL / PaintMonitor.js

Ext.define('MyApp.util.PaintMonitor', {
    override: 'Ext.util.PaintMonitor',

    uses: [
        'Ext.env.Browser',
        'Ext.env.OS',
        'Ext.util.paintmonitor.CssAnimation',
        'Ext.util.paintmonitor.OverflowChange'
    ],

    constructor: function(config) {
        return new Ext.util.paintmonitor.CssAnimation(config);
    }

}, function () {
    // 
    console.info("Ext.util.PaintMonitor temp. fix is active");
    // 
});

Application / UTIL / SizeMonitor.js

Ext.define('MyApp.util.SizeMonitor', {
    override: 'Ext.util.SizeMonitor',

    uses: [
        'Ext.env.Browser',
        'Ext.util.sizemonitor.Default',
        'Ext.util.sizemonitor.Scroll',
        'Ext.util.sizemonitor.OverflowChange'
    ],

    //Thanks! http://trevorbrindle.com/chrome-43-broke-sencha/

    constructor: function (config) {
        var namespace = Ext.util.sizemonitor;

        if (Ext.browser.is.Firefox) {
            return new namespace.OverflowChange(config);
        } else if (Ext.browser.is.WebKit) {
            if (!Ext.browser.is.Silk && Ext.browser.engineVersion.gtEq('535') && !Ext.browser.engineVersion.ltEq('537.36')) {
                return new namespace.OverflowChange(config);
            } else {
                return new namespace.Scroll(config);
            }
        } else if (Ext.browser.is.IE11) {
            return new namespace.Scroll(config);
        } else {
            return new namespace.Scroll(config);
        }
    }
}, function () {
    // 
    console.info("Ext.util.SizeMonitor temp. fix is active");
    // 
});

Once these files are created, you should add them to the require array at the top of app.js:

    requires: [
        'Ext.MessageBox',
        'MyApp.util.SizeMonitor', //TEMP fix, Chrome 43 bug
        'MyApp.util.PaintMonitor' //TEMP fix, Chrome 43 bug
    ],

Posted by jtjohnson260 on Thu, 13 Dec 2018 10:27:19 -0800