解决ExtJS 6/7无限滚动表格/列表(infinite: true)无法在触屏Windows浏览器上触摸滚动
ExtJS 6 或 ExtJS 7 在 Windows 触屏电脑的浏览器上,配置了 infinite: true
的表格或列表,无法触摸滚动,而一般的可滚动容器(scrollable: true)可以正常滚动。
这是因为,配置了 infinite: true
的表格或列表,使用的不是普通的可滚动容器(实际是带 overflow-y: auto
样式的 div
),而是 Ext.scroll.VirtualScroller
,这个容器是监听 touchstart
/touchmove
/touchend
事件来实现无限滚动的。
所谓无限滚动,就是延迟渲染,是为了解决表格/列表显示大量数据时的性能问题的,具体可以看我以前这篇文章 《关于 Grid 的 Buffered(延迟渲染/无限滚动)相关配置在 ExtJS 各版本中变化》
究其底层原因,是因为 ExtJS 为了适配各种平台(不同系统和不同浏览器),其底层对点击、触摸等事件做了转换。比如非触摸屏的浏览器上,是没有 touchstart/touchmove/touchend事件的,ExtJS 就用 mousedown/mousemove/mouseup 来模拟这些 touch 事件。
但是ExtJS没有处理好触屏windows浏览器上的事件转换。
为了解决这个问题,需要如下增加一个 override
/**
* workaround for bug in ExtJs 6+.
* Resolved in current yet unreleased version
*/
Ext.define(null, {
override: 'Ext.dom.Element'
},