ExtJS MessageBox 不会像 alert(..) 那样阻塞

Posted 2023-02-26

【中文标题】ExtJS MessageBox 不会像 alert(..) 那样阻塞

【英文标题】：ExtJS MessageBox does not block like alert(..) does

【发布时间】：2017-02-23 12:37:41

【问题描述】：

ExtJS MessageBox 似乎不像 javascript alert(..) 那样阻塞。我想显示一个弹出窗口，然后调用和 AJAX 调用，然后它将关闭窗口。

如果我这样调用 show 方法，那么...

//Alert Box :
var alertBox = Ext.create('Ext.window.MessageBox');
var config = 
    title : 'Title',
    closable: true,
    msg: 'Message',
    buttons: Ext.Msg.OK,
    buttonText:  ok: EML.lang.buttons.ok ,
    modal: true
;
alertBox.show(config);


//callback
Ext.Ajax.request(
    url: someURL,
    method: 'POST',
    callback: function (options, success, response) 
        //do some stuff
        self.up('window').destroy();
    
)

..不显示弹出窗口，但关闭父窗口。

如果我使用标准的 Javascript alert，那么警报将被阻止。单击确定按钮后，将执行回调，然后关闭窗口。

    //Alert Box :
    alert('asdf')


    //callback
    Ext.Ajax.request(
        url: someURL,
        method: 'POST',
        callback: function (options, success, response) 
            //do some stuff
            self.up('window').destroy();
        
    )

为什么 MessageBox 不阻塞？ 我可以做些什么来解决这个问题？ MessageBox 是否需要知道要阻止的父窗口？

【参考方案1】：

它不会阻塞，因为自定义 javascript 代码不支持阻塞。正如 chrome 控制台告诉我们的那样，

window.alert
function alert()  [native code] 

并且本机代码可以阻止执行。

在 ExtJS 中，您会为这样的消息框编写回调：

//Alert Box :
var alertBox = Ext.create('Ext.window.MessageBox');
var config = 
    title : 'Title',
    closable: true,
    msg: 'Message',
    buttons: Ext.Msg.OK,
    buttonText:  ok: EML.lang.buttons.ok ,
    modal: true,
    callback:function(btn) 
        //callback
        Ext.Ajax.request(
            url: someURL,
            method: 'POST',
            callback: function (options, success, response) 
                //do some stuff
                self.up('window').destroy();
            
        )
    
;
alertBox.show(config);

如果这样的回调嵌套很深，我倾向于像这样扁平化回调：

var store = me.down('grid').getStore();
var callback3 = function(btn) 
    if(btn=="yes") store.sync();
;
var callback2 = function() 
    Ext.Msg.prompt('A','Third', callback3);
;
var callback1 = function() 
    Ext.Msg.alert('A','Second', callback2);
;
Ext.Msg.alert('A','First', callback1);

在较新版本的 ExtJS 中，您可以查看 Ext.Promise，但在 ExtJS 4.1 中则不行。

【讨论】：

是的，我最终是这样实现的。它读起来不太好。如果我遇到连续有 5 个警报框的情况怎么办？在 Javascript 中，我只有 5 行 alert(..)。在 Extjs 中，我需要在彼此之间嵌入 5 个消息框，这看起来像一团糟......除非有某种方式与承诺

@OliverWatkins 我已经修改了我的答案。