Sencha Touch Ext.Carousel 切换 Bug

没有什么比测试和工作的应用程序感到沮丧，只有打开它有一天，发现它... 不工作。这是Sencha Touch开发人员最近会有的经验，因为最新的Chrome更新（Chrome 43）在Sencha Touch应用程序中造成了一些错误。如果您尝试在Chrome浏览器中查看应用程序或Android设备上的最新系统Web视图，则会出现此问题。

当我在桌面电脑上加载Chrome中的一个Sencha Touch应用程序时，我首先注意到了这个问题，并且我的界面的可滚动部分丢失了。我必须滚动才能显示出来。开发人员报告了一系列问题，我相信我的应用程序还有更多的问题。

如何修复Chrome 43错误

那么当然，我转向Google。太久以前，我发现这个来自Mitchell Simoens的声明。他列出了Chrome 43所造成的问题，并列出了针对EXT JS和Sencha Touch的一些修复。Sencha Touch的修复特别是将以下内容添加到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);        }    }});

以及以下到您的app.scss文件来解决加载微调器不会旋转的问题：

@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); }}

实施这些修补程序后，似乎打破了我的iOS版本（也可能是本机Android版本，我从来没有尝试过）。我从来没有能够弄清楚为什么（因为没有发生错误），但是当我将这两个代码添加到我的应用程序中时，我的launch（）函数永远不会被触发，这意味着我被永远地停留在闪屏上。

随着更多的挖掘，我发现这个解决方案从Lee Boonstra（谁也是一个Sencha员工），似乎做这个工作。对于这个解决方案的信誉也来到Trevor Brindle，他撰写了一篇关于这个错误的非常有用的博文。

而不是直接添加覆盖到app.js，我们将它们添加为实用程序文件，并在app.js中要求它们。要实现此解决方案，您需要在名为util的文件夹中创建两个文件。他们应该是这样的：

应用程序/ 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");    // });

应用程序/ 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");    // });

一旦创建了这些文件，您应该将它们添加到app.js顶部的require数组中：

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