ExtJS MessageBox does not block like alert(..) does

Question

ExtJS MessageBox does not seem to block like Javascript alert(..) does. I want to show a popup, and then call and AJAX call, upon which it will close the window.

If I call the show method like this then...

//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();
    }
})

..no popup is shown, however the parent window is closes.

If I use a standard Javascript alert then the alert will block. After clicking the OK button, then the callback is executed after which the window closes.

    //Alert Box :
    alert('asdf')


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

• why does MessageBox not block?
• what can I do to get around this problem?
• does the MessageBox somehow need to know about the parent window to block?

Answer 1

It does not block because blocks are not supported in custom javascript code. As chrome console tells us,

window.alert
function alert() { [native code] }

and native code can block execution.

In ExtJS, you would write a callback for a message box like this:

//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);

If such callbacks are deeply nested, I tend to flatten the callbacks like this:

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);

In newer versions of ExtJS, you can check out Ext.Promise, but not in ExtJS 4.1.