窗口关闭(X)按钮事件创建问题,在Extjs 4.2中打开一个弹出窗口

时间:2018-01-05 11:33:18

标签: extjs

我们想在主窗口的点击关闭(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();
        }
    }
});

1 个答案:

答案 0 :(得分:3)

为此,您需要使用beforeclosewindow事件。在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();
        }
    }]
});