解决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'
},
function(){
    var additiveEvents = this.prototype.additiveEvents,
        eventMap = this.prototype.eventMap;
    if(Ext.supports.Touch && Ext.os.is.windows && Ext.os.is.Desktop){
        eventMap['touchstart'] = 'mousedown';
        eventMap['touchmove'] = 'mousemove';
        eventMap['touchend'] = 'mouseup';
        eventMap['touchcancel'] = 'mouseup';
        eventMap['click'] = 'click';
        eventMap['dblclick'] = 'dblclick';
        additiveEvents['mousedown'] = 'mousedown';
        additiveEvents['mousemove'] = 'mousemove';
        additiveEvents['mouseup'] = 'mouseup';
        additiveEvents['touchstart'] = 'touchstart';
        additiveEvents['touchmove'] = 'touchmove';
        additiveEvents['touchend'] = 'touchend';
        additiveEvents['touchcancel'] = 'touchcancel';

        additiveEvents['pointerdown'] = 'mousedown';
        additiveEvents['pointermove'] = 'mousemove';
        additiveEvents['pointerup'] = 'mouseup';
        additiveEvents['pointercancel'] = 'mouseup';
    }
})

你可能感兴趣的:(Sencha,ExtJS,和,Touch,js)