Question

我目前面临的问题似乎是ExtJS或JavaScript用户非常常见的问题。由于“消息确认”框的异步性质，我遇到了问题。我试图在许多论坛上找到解决方案，但没有一个解决方案没有给我一个更简单的方法来处理下面的问题。或者我可能无法理解所给出的提示。

以下是我的代码：

var modalWindow = new Ext.Window({
        id: 'modalWindow',
        ...
        ...
        listeners: {
            beforeclose: function ( window, eOpts ){    
                if ( dirtyCheck() ){
                    //perform abc()
                    // and don't close the modal window
                    return false;
                }
                else {
                    //perform xyz()
                    // close the modal window
                    return true;
                }
            },
            close: function ( panel, eOpts ){
                //will trigger beforeclose event to check if all is well
                //refresh screen
            }

        },
        buttons: [{
            text: 'Close',
            handler: function () {
                modalWindow.close() // Same close() method is called when we click on window close ( X symbol ) tool.
            }
        }]        
});

function dirtyCheck(){
    // Code to check if dirty records exist
    if ( /* Found dirty records */ ){
        Ext.MessageBox.confirm('Please Confirm', 'Changes not saved. Do you want to close   the window?', function (btn) {
            if (btn === 'yes') {
                console.log('*** clicked yes ****');
                window.close();
            }
        });
    }
}

案例描述：我有一个网格，双击网格行打开上面编码的模态窗口。我在模态窗口上做了一些修改。如果用户点击“关闭”按钮，按钮或模态窗口关闭工具（右上角的X符号）甚至ESC按钮，我应该提示确认消息。如果用户点击“是”＆＃39;，我应关闭模态窗口，否则请将其打开。

我了解到点击X（关闭工具）或ESC按钮会触发关闭＆＃39;事件反过来触发前关闭＆＃39;并等待true / false来破坏模态窗口或保持打开状态。

问题：当用户点击X（关闭tol）或ESC按钮时，在我调试时，我看到控制器在关闭之前，然后是我写的dirtyCheck（）函数。 dirtyCheck功能还会显示“消息确认”框，但控件不会等待我单击“是/否”。它返回到before在后台关闭然后关闭。因此，当用户决定点击“是”时，或者＆＃39;没有＆＃39;，ExtJS决定如何处理模态窗口，因此我无法控制是否关闭模态窗口。

在这种情况下，有谁可以帮助我做些什么？

Answer 1

您可能需要使用window.destroy（）在确认后删除它，您的beforeClose函数可以

beforeclose: function(window, eOpts) {
      Ext.Msg.confirm('Please Confirm', 'Changes not saved. Do you want to close the window?', function(answer) {
          if (answer == "yes") {
              window.destroy();
          }
      });
      return false;
}

Answer 2

将窗口传递给检查功能，并在用户做出选择后将其关闭。

var modalWindow = new Ext.Window({
    id: 'modalWindow',
    ...
    ...
    listeners: {
        beforeclose: function ( window, eOpts ){    
            dirtyCheck(window);
            return false;
        },
        close: function ( panel, eOpts ){
            //will trigger beforeclose event to check if all is well
            //refresh screen
        }

    },
    buttons: [{
        text: 'Close',
        handler: function () {
            modalWindow.close() // Same close() method is called when we click on window close ( X symbol ) tool.
        }
    }]        
});

function dirtyCheck(window){
    // Code to check if dirty records exist
    Ext.MessageBox.confirm('Please Confirm', 'Changes not saved. Do you want to close   the window?', function (btn) {
    confirmation = true;
    if (btn === 'yes') {
        console.log('*** clicked yes ****');
        window.close();
    }
    });
}

顺便说一句，您可以按照自己的方式使用，但是您需要使用本机浏览器对话框，请参阅确认功能http://www.w3schools.com/js/js_popup.asp

ExtJS 4：模态窗口上的消息确认框问题

2 个答案: