在 Extjs 4.2 中打开弹出窗口时窗口关闭（X）按钮事件创建问题答案

【问题标题】：Window close(X) button event creating issue with open a popup in Extjs 4.2在 Extjs 4.2 中打开弹出窗口时窗口关闭（X）按钮事件创建问题
【发布时间】：2019-06-16 10:02:51
【问题描述】：

我们想在主窗口的单击关闭（X）按钮上打开一个弹出窗口，并且窗口应该打开，直到我们使用确认按钮。问题是在确认弹出窗口打开之前主窗口隐藏（关闭），当我们重新打开主窗口时，它没有显示并在控制台中出现以下错误。 “无法读取未定义的属性‘显示’”

Ext.define('Info.UI.Main Window',
{
    extend: 'Ext.window.Window',
    id: 'MyWindow',
    modal: true,
    title: 'Main Window',
    closable: true,
    closeAction: 'hide',
    width: 515,
    height: 705, //695,
    layout: 'border',
    bodyStyle: 'padding: 5px;',
    listeners: {
        save: function() {
        },
        //close main window when click X button
        close: function() {
             //alert("Open confirm window");
             OpenConfirmationWindow();
        }
    }
});

【问题讨论】：

你没有提供调用show的代码，所以我帮不了你。
不，它的正常代码显示该窗口，但它只是在我们调用关闭事件和打开确认弹出窗口的函数时发生。不使用 X 按钮并调用“OpenConfirmationWindow()”然后它工作正常。
我帮不了你。错误出现在您不想提供的代码中。
请提供一个 Sencha fiddle 来说明问题。
好的，我正在显示代码。

标签： extjs

【解决方案1】：

为此，您需要使用window 的beforeclose 事件。在beforeclose 事件中，您需要维护一个config 来检查窗口是否关闭。

在这个 FIDDLE 中，我使用您的代码创建了一个演示并进行了修改。我希望这将帮助或指导您实现您的要求。

代码片段

Ext.define('Info.UI.Main Window', {
    extend: 'Ext.window.Window',
    xtype: 'infoWindow',
    modal: true,
    title: 'This a new Window',
    closable: true,
    closeAction: 'hide',
    width: 300,
    height: 400,
    layout: 'border',
    bodyStyle: 'padding: 5px;',
    listeners: {
        save: function () {},
        //beforeclose main window when click X button
        beforeclose: function (thisWindow) {
            if (!thisWindow.isConfirmed) {
                Ext.MessageBox.confirm('Confirmation', 'Are you sure you wish to close this window before saving your changes?', function (btn) {
                    if (btn == 'yes') {
                        thisWindow.isConfirmed = true;
                        thisWindow.close();
                    }
                });
                return false;
            }
        }
    }
});

Ext.create('Ext.panel.Panel', {
    title: 'My Panel',
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'button',
        margin: 20,
        text: 'Open Info Wndow',
        handler: function () {
            //If window is already created then we can get using component query or Ext.getCmp();
            var win = Ext.ComponentQuery.query('infoWindow')[0] || Ext.create('Info.UI.Main Window');
            win.isConfirmed = false;
            win.show();
        }
    }]
});

【讨论】：