ExtJS 4.2主窗口关闭按钮触发弹窗时出现异常问题

嘿，我来帮你搞定这个问题！你遇到的报错和主窗口无法显示的问题，本质是主窗口的默认关闭逻辑和你的确认弹窗流程冲突了，咱们一步步理清楚：

问题根源 #

你设置了closeAction: 'hide'，这意味着点击主窗口的关闭按钮时，ExtJS会自动执行主窗口的隐藏操作——哪怕你在close事件里打开了确认弹窗。等你之后想重新打开主窗口时，要么是主窗口的引用丢失了，要么是获取组件时出了问题，才会抛出Cannot read property 'show' of undefined的错误。

解决方案 #

核心思路很简单：先阻止主窗口的默认关闭/隐藏行为，等用户在确认弹窗里做出选择后，再手动处理主窗口的状态。

把你主窗口的listeners里的close事件逻辑替换成下面的代码：

listeners: {
    save: function() { },
    close: function(mainWindow, eOpts) {
        // 阻止ExtJS默认的关闭/隐藏动作，让主窗口先保持显示
        eOpts.preventDefault();
        
        // 创建并弹出确认弹窗
        Ext.create('Ext.window.Window', {
            title: '确认关闭',
            modal: true,
            width: 300,
            height: 160,
            layout: 'vbox',
            align: 'center',
            padding: 20,
            items: [{
                xtype: 'label',
                text: '确定要关闭主窗口吗？',
                style: 'font-size: 14px;'
            }],
            buttons: [{
                text: '确认',
                handler: function() {
                    // 用户确认后，手动隐藏主窗口
                    mainWindow.hide();
                    // 关闭确认弹窗
                    this.up('window').close();
                }
            }, {
                text: '取消',
                handler: function() {
                    // 用户取消，仅关闭确认弹窗，主窗口保持显示
                    this.up('window').close();
                }
            }]
        }).show();
    }
}

关键细节说明 #

1. 阻止默认行为：通过eOpts.preventDefault()，让ExtJS不会自动隐藏主窗口，完全由我们的确认逻辑来控制主窗口的状态。
2. 可靠的组件引用：直接使用close事件参数里的mainWindow（当前主窗口的实例），比用Ext.getCmp('MyWindow')更稳妥，避免id冲突或者组件找不到的问题。
3. 独立的确认弹窗：用Ext.create动态创建确认弹窗，确保每次点击关闭按钮都能弹出新的弹窗，不会和主窗口的生命周期绑定出问题。

之后你再想重新打开主窗口时，用Ext.getCmp('MyWindow').show()就能正常显示，不会再出现undefined的报错啦。

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