ExtJS 6 - 隐藏组件时停止事件委托？答案

【问题标题】：ExtJS 6 - Stop Event Delegation while hiding component?ExtJS 6 - 隐藏组件时停止事件委托？
【发布时间】：2016-04-18 07:06:07
【问题描述】：

我必须在它的模糊事件中隐藏相同的字段。

Extjs 6 在组件隐藏方法上调用事件委托。Event delegation revert focus to last field which had focus。

而且，我不希望这种恢复焦点。有什么办法可以stop event delegation 在 extjs 中隐藏元素？

extjs 5 自带事件委托 - Delegated Events and Gestures in Ext JS 5

用于隐藏的方法 - https://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.Component-method-onHide

ExtJS 源代码中的 onHide() 方法 - 检查 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);
    }
},

【问题讨论】：

如果我说的不对，请纠正我，¿您想在组件触发事件时实现这一点blur 也用hide 事件隐藏自己？在这种情况下，您是否尝试过使用stopEvents/resumeEvents？
你理解对了..component.hide()我正在使用的方法..我应该把这个stopEvents/resumeEvents放在哪里？

标签： javascript extjs extjs6 event-delegation

【解决方案1】：

你做错了，revertFocus() 是主要问题来源。解决方案可能是：

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

【讨论】：

感谢您的直接指导。你是对的。但是在extjs 6 中需要多一行来停止事件委托。更新您的答案并接受。

【解决方案2】：

在触发模糊事件时，在视图控制器中调用的函数中使用suspendEvents 和resumeEvents：

不是stopEvents 是suspendEvents。我的错。 :P

blurEventFunction:function(cmp){
    cmp.suspendEvents();
    cmp.hide();
    camp.resumeEvents();
}

【讨论】：

没有成功..仍然恢复被调用的焦点方法
我已经更新了我的问题 - 从 extjs 源复制的 onHide() 方法显示 revertfoucs() 无论如何都会被调用

【解决方案3】：

我遇到了同样的问题。（extjs 6.5.1 - 使用带有 closeAction: 'hide' 的模态窗口）

我正在调试代码，似乎它发生了，因为关注的最新字段位于面板中，而我的模态窗口不是该面板的子窗口。（好像是extjs获取模态窗口的祖先来找到最新的焦点字段，然后，设置焦点）

当我将窗口添加到该面板时，它运行良好。（当模态窗口关闭时，焦点在打开窗口之前聚焦的最新字段）。

在调试 Ext.util.Focusable 类时，我看到了一个名为 preventRefocus 的配置。如果将值为 true 的配置添加到模态窗口，则不会执行 revertFocus 函数的内容，也不会出现错误。

revertFocus: function() {
        var me = this,
            focusEvent = me.focusEnterEvent,
            activeElement = Ext.Element.getActiveElement(),
            focusTarget, fromComponent, reverted;

        // If we have a record of where focus arrived from, 
        //  and have not been told to avoid refocusing, 
        //  and we contain the activeElement. 
        // Then, before hiding, restore focus to what was focused before we were focused. 

        // --->>> THE IF BELOW: !me.preventRefocus <<<---

        if (focusEvent && !me.preventRefocus && me.el.contains(activeElement)) {

我希望它也可以帮助将来的人。

【讨论】：