Passive event listeners

[christoph.piepka]

Hi,

there is a new feature in the DOM spec called passive event listeners that eliminates the need for scrolling to block on touch and wheel event listeners.


Take a closer look here:

https://github.com/WICG/EventListene...s/explainer.md


Can we use this with Ext JS 6? Does anybody already tried it or have some experiences with this feature regarding Ext JS?

Greetings

Christoph

[alfonso.nishikawa]

Hi,

there is a new feature in the DOM spec called passive event listeners that eliminates the need for scrolling to block on touch and wheel event listeners.


Take a closer look here:

https://github.com/WICG/EventListene...s/explainer.md


Can we use this with Ext JS 6? Does anybody already tried it or have some experiences with this feature regarding Ext JS?

Greetings

Christoph

Did you find anything?

[cpiepka]

Hi,

unfortunately I couldn't find anything.

Any information from Sencha?

[alfonso.nishikawa]

Just a proof of concept because the parameter {passive: true} seems to exist only in Chrome:

Ext.define('Overrides.event.publisher.Dom', {
    override: 'Ext.event.publisher.Dom',

    addDelegatedListener: function(eventName) {
        this.delegatedListeners[eventName] = 1;
        if (eventName === 'mousewheel') {
            this.target.addEventListener(
                eventName, this.onDelegatedEvent, {passive: true}
            );
        } else {
            this.target.addEventListener(
                eventName, this.onDelegatedEvent, !!this.captureEvents[eventName]
            );
        }
    },

    addDirectListener: function (eventName, element, capture) {
        if (eventName === 'scroll') {
            element.dom.addEventListener(
                eventName,
                capture ? this.onDirectCaptureEvent : this.onDirectEvent,
                {passive: true}
            );
        } else {
            element.dom.addEventListener(
                eventName,
                capture ? this.onDirectCaptureEvent : this.onDirectEvent,
                capture
            );
        }
    }
}) ;

I wrote it for ExtJS 6.2.0.981, but probably it is a class that does not change much and works as is with other versions.

[[email protected]]

On Carousel i use "touchAction" for stop Chrome warning.

http://docs.sencha.com/extjs/6.2.1/m...fg-touchAction

[alfonso.nishikawa]

On Carousel i use "touchAction" for stop Chrome warning.

http://docs.sencha.com/extjs/6.2.1/m...fg-touchAction

How exactly? Any code snippet as how to configure it?

[[email protected]]

Sure. I'm using SA 4.2.2, ExtJs 6.2.1 Modern.

...
{
            xtype: 'carousel',
            directionLock: true,
            flex: 1,
            touchAction: {
                panY: true,
                panX: true
            },
            layout: 'vbox',
            items: [
...

[alfonso.nishikawa]

Thanks! Sadly in classic seems not to work