文档章节

sencha touch 在新版chrom中painted事件失效,滚动条失效

robingao
 robingao
发布于 2015/09/14 16:13
字数 545
阅读 25
收藏 0

I’m probably not the only one who, starting last September started seeing deprecation warnings while developing my Sencha Touch app. Turns out, the Chromium project wants to deprecate the overflowchanged event in Blink/Chrome. They cite that it is a non-standard event with near zero use, however Mozilla has a rough equivalent set of events underflow and overflow.  This deprecation is a bit of a problem for Sencha because the framework uses this event to detect element resizes and paints in Chrome.

This is especially important, apparently, for the list component which doesn’t get a height set, or any item components added without this event functioning. Imagine my surprise the other day when checking something in my Chrome Canary installation (Chrome 44) and Beta (Chrome 43) that my app’s lists didn’t work at all; in fact, all Sencha apps I tried with lists were broken. Noticeably absent from the console was the deprecation warning I had been ignoring for all these months.

Screen Shot 2015-04-28 at 9.10.36 AM

Sencha is pretty quiet about this, and I’ve only found two posts so far, here and here talking about this. That’s very strange to me, considering this bug is also in their preview ExtJS 6 SDK. Fortunately, Sencha ships with several methods of detecting resizes and paints to support different browsers. Unfortunately, the other viable solution attaches to a scroll listeners, notoriously poor for performance. I haven’t noticed a huge difference, but you might.

Given this is a browser standardization issue for chromium, I doubt they are going to reimplement it before the stable branch, but we have a few weeks to figure that out.

In the mean time, the solution for Sencha is fairly simple, and involves overriding two if statements in two framework files, to force Sencha to use the alternative methods. Post/Tweet me if you see any side effects, or perhaps have a better method.



Ext.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) {            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);        }    }});



Ext.override(Ext.util.PaintMonitor, {   constructor: function(config) {       if (Ext.browser.is.Firefox || (Ext.browser.is.WebKit && Ext.browser.engineVersion.gtEq('536') && !Ext.browser.engineVersion.ltEq('537.36') && !Ext.os.is.Blackberry)) {           return new Ext.util.paintmonitor.OverflowChange(config);       }       else {           return new Ext.util.paintmonitor.CssAnimation(config);       }   }});






You should use Ext.define for overrides so they can be loaded during development if you use Cmd. For example:

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


参考  :

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


http://www.ladysign-apps.com/developer/chrome-43-breaks-sencha-touch-modern-toolkit-and-how-to-fix-it/#.VfZwQC7se0c


https://github.com/savelee/senchatouch-chrome43





本文转载自:http://trevorbrindle.com/chrome-43-broke-sencha/

robingao
粉丝 7
博文 15
码字总数 29129
作品 0
朝阳
程序员
私信 提问
Sencha Touch开发一些需要注意的地方

Sencha Touch开发一些需要注意的问题 如今Sencha Touch已经升级到2.4了,功能更加强大,性能也有所提升。 但由于一些功能的改进,文档并没有及时更新,导致开发时会遇到一些困难。 结合我使用...

crazymus
2015/02/12
5.8K
0
Sencha Touch RC1 发布

Sencha Touch 是第一个HTML5的手机应用框架 Sencha Touch allows you to develop web apps that look and feel native on Apple iOS and Google Android touchscreen devices. 下载地址:htt......

红薯
2010/11/09
480
1
前端框架layer.open ios不支持弹出页面滚动条

题:最近用前端框架layer做项目,弹出层(iframe)在web端和安卓上都有滚动条,可到了ios上就不支持上下滚动。 解决方法: .scroll-wrapper { -webkit-overflow-scrolling: touch; overflow-...

wjm1818
2018/10/25
68
0
构建基于 Sencha Touch 框架的 Mobile web 应用

Sencha Touch 是第一个专门设计为移动设备开发 web 应用的 JavaScript 框架,它基于 HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像...

IBMdW
2011/09/20
1K
0
用 Sencha Touch 构建移动 web 应用程序

Sencha Touch 是一个使用 HTML5、CSS3 和 JavaScript 语言构建的移动 web 应用程序框架,在本文中,学习如何应用您当前的 web 开发技能进行移动 web 开发。下载和建立 Sencha Touch,通过一个...

IBMdW
2012/03/19
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Experts say the weaker pound is drawing investors to the UK tech sector

UK tech companies secured a record £5.5bn in foreign investment in the first seven months of this year, research shows. This was more than the amount invested per capita in th......

wowloop
13分钟前
5
0
Add support for Android 9-patch images in BorderImage

The 9-patch image implementation in Qt Quick Controls 1 is an internal implementation detail of the Android style. It cannot handle .9.png image files out of the box, but takes ......

shzwork
18分钟前
4
0
c/c++日期时间处理函数小结

日期时间处理函数: 日期时间转为字符串 strftime/std::put_time 字符串解析成日期时间 strptime/std::get_time 时间结构转换:time_t->tm localtime:time_t->tm 时间结构转换:tm->time_t ...

chuqq
22分钟前
4
0
Apache Flink 进阶入门(二):Time 深度解析

前言 Flink 的 API 大体上可以划分为三个层次:处于最底层的 ProcessFunction、中间一层的 DataStream API 和最上层的 SQL/Table API,这三层中的每一层都非常依赖于时间属性。时间属性是流处...

大涛学长
23分钟前
3
0
创龙基于Xilinx Artix-7系列FPGA处理器

SOM-TLA7是一款由广州创龙基于Xilinx Artix-7系列FPGA自主研发的核心板,可配套广州创龙Artix-7开发板使用。核心板尺寸仅70mm*50mm,采用沉金无铅工艺的10层板设计,专业的PCB Layout保证信号...

Tronlong创龙
29分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部