ExtJS打开5级嵌套模态窗口后关闭时层级异常问题求助

问题原因 #

• ExtJS模态窗口的层级依赖内部zIndex栈管理，连续关闭多层嵌套模态窗口（如5→4）时，框架未正确回溯zIndex栈，导致父窗口（窗口2）的zIndex未被重置到子窗口（窗口3）之下，反而保留了更高层级，同时模态窗口的遮罩逻辑未与层级同步，出现窗口2灰化却位于顶层的矛盾状态。
• 多层嵌套时，窗口间的父子层级关联维护不严谨，关闭窗口4后，框架错误提升了窗口2的层级，而非恢复窗口3的顶层显示状态。

解决方案 #

• 手动维护父窗口层级：在模态窗口的close事件中，主动将父窗口前置，确保层级正确。示例代码：

Ext.define('MyApp.view.NestedModalWindow', {
    extend: 'Ext.window.Window',
    modal: true,
    listeners: {
        close: function(win) {
            var parentWin = win.parentWindow || win.ownerCt;
            if (parentWin && !parentWin.isDestroyed) {
                parentWin.toFront();
            }
        }
    }
});

• 减少模态窗口嵌套层级：尽量控制模态窗口嵌套不超过3层，改用TabPanel、非模态窗口等替代方案，从根源规避层级管理bug。
• 强制重置窗口zIndex：关闭窗口4后，手动调整窗口2和窗口3的层级关系，确保窗口3在顶层。示例代码：

// 关闭窗口4后执行
var win3 = Ext.getCmp('window3');
var win2 = Ext.getCmp('window2');
if (win3 && win2) {
    win2.setZIndex(win3.getZIndex() - 10);
    win3.toFront();
}

• 升级ExtJS版本：若使用4.x及更早版本，该问题属于框架已知bug，升级到6.x等稳定新版本可修复此类层级管理问题。

内容的提问来源于stack exchange，提问作者Charles Candy