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
    ],