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

Posted 2023-02-26

【中文标题】ExtJS 4：模式窗口上的消息确认框问题

【英文标题】：ExtJS 4: Problems with Message confirmation box on a modal window

【发布时间】：2014-05-15 03:25:30

【问题描述】：

我目前面临一个对于 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 按钮，我应该提示确认消息。如果用户点击“是”，我应该关闭模式窗口，否则保持打开状态。

我了解到单击 X（关闭工具）或 ESC 按钮会触发“关闭”事件，该事件又会触发“关闭前”并等待真/假以破坏模式窗口或使其保持打开状态。

问题：当用户点击 X (close tol) 或 ESC 按钮时，当我调试时，我看到控件将转到 beforeclose，然后是我编写的dirtyCheck() 函数。 dirtyCheck 函数还显示一个消息确认框，但控件不会等待我单击是/否。它在后台返回到 beforeclose ，然后关闭。因此，当用户决定点击“是”或“否”时，ExtJS 已经决定如何处理模态窗口，因此我无法控制是否关闭模态窗口。

有人可以帮我解决这种情况该怎么办吗？

【问题讨论】：

我有同样的问题，但我找不到以下问题的解决方案，请让它解决你为这个问题做了什么？

我希望我能立即获得解决方案。在我掌握我使用的调整并将其粘贴到此处之前，请给我一些时间。

【参考方案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;

【讨论】：

可能我无法直接应用您的建议。但似乎我可以通过利用 close() 和 destroy() 事件的差异找到解决问题的方法。很快就会更新你。

搞定了，伙计。谢谢你的主意。实际上，我在不同的地方使用了 close() 和 destroy() 的组合并让它工作。

【参考方案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

【讨论】：

编辑了您的代码解决方案（错误地），而不是编辑我的原始代码 sn-p。对于那个很抱歉。来到您提供的解决方案，我发现那里有问题。让我知道我是否正确：当您在消息确认中说 window.close() 时，它不会触发 beforeclose() 事件吗？然后可能会继续进入一个连续的循环？