Sencha TouchExt.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 ],