Search code examples
javascriptextjsextjs6event-delegation

ExtJS 6 - Stop Event Delegation while hiding component?


I have to hide same field on it's blur event.

Extjs 6 calls event delegation on component hide method.Event delegation revert focus to last field which had focus.

And, I don't want this revert focus. Is there any way I can stop event delegation while hiding elements in extjs ?

Event delegation comes with extjs 5 - Delegated Events and Gestures in Ext JS 5

Method using for hide - https://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.Component-method-onHide

onHide() method from ExtJS source code - check revertFocus()

onHide: function(animateTarget, cb, scope) {
    var me = this,
        ghostPanel, fromSize, toBox;
    if (!me.ariaStaticRoles[me.ariaRole]) {
        me.ariaEl.dom.setAttribute('aria-hidden', true);
    }
    // Part of the Focusable mixin API.
    // If we have focus now, move focus back to whatever had it before.
    me.revertFocus(); // this revert focus making probelm
    // Default to configured animate target if none passed
    animateTarget = me.getAnimateTarget(animateTarget);
    // Need to be able to ghost the Component
    if (!me.ghost) {
        animateTarget = null;
    }
    // If we're animating, kick off an animation of the ghost down to the target
    if (animateTarget) {
        toBox = {
            x: animateTarget.getX(),
            y: animateTarget.getY(),
            width: animateTarget.dom.offsetWidth,
            height: animateTarget.dom.offsetHeight
        };
        ghostPanel = me.ghost();
        ghostPanel.el.stopAnimation();
        fromSize = me.getSize();
        ghostPanel.el.animate({
            to: toBox,
            listeners: {
                afteranimate: function() {
                    delete ghostPanel.componentLayout.lastComponentSize;
                    ghostPanel.el.hide();
                    ghostPanel.setHiddenState(true);
                    ghostPanel.el.setSize(fromSize);
                    me.afterHide(cb, scope);
                }
            }
        });
    }
    me.el.hide();
    if (!animateTarget) {
        me.afterHide(cb, scope);
    }
},

Solution

  • You are doing it wrong, revertFocus() is a main problem source. The solution might be:

    blurEventFunction:function(cmp){
        cmp.previousFocus = null;
        cmp.hide();
    }