Dispalying more than one message box one after other - extjs

Question

I have requirement to show multiple info/alert messages one after other.
Here is my sample code
var messageQueueStore = Ext.create('Ext.data.Store', {
fields: ['type','Title','text','buttonConfig','callback'],
storeId: 'messageQueueStore'
});
function displayMessage(type, Title, Text, buttonConfig, callback){
messageQueueStore.loadData([{type: type, Title : Title, Text: Text, buttonConfig:buttonConfig, callback:callback}], true);
if(!Ext.MessageBox.isVisible()){
displayEachMessage();
}
}
function displayEachMessage(){
var firstRecord = messageQueueStore.getAt(0);
//We are currently handling only alert messages. If needed this method can be extended to hande other type of messages
if(firstRecord.get('type') == 'alert'){
Ext.MessageBox.show({
title : firstRecord.get('Title'),
msg : firstRecord.get('Text'),
buttons: Ext.Msg.OK,
listeners: {
beforeclose : function(){console.log("Before close");},
close : function(){console.log("close");},
hide : function(){console.log("hide");},
beforehide : function(){console.log("beforehide");},
},
fn : messageClosed
})
}
}
function messageClosed(){
// before close event needs to be handled as well
messageQueueStore.removeAt(0);
if(messageQueueStore.count() != 0){
displayEachMessage();
}
}
// And this is how i use this functionality
displayMessage('alert','first',"You are now seeing the first message");
displayMessage('alert','second',"This is the second message");
displayMessage('alert','third',"Here comes the third");
displayMessage('alert','fourth',"And this is the last");
This works perfectly fine when user clicks on the OK button. However when user clicks on the (x) button on the message box top right corner none of the events i am trying to listen are triggered.
And hence the subsequent messages are not displayed.
Any pointers on how to handle the close event on message box will be very helpful

Answer 1

Here is working sample: http://jsfiddle.net/kTpct/2/
function myAlert(title, message){
Ext.create('Ext.window.Window', {
width: 300,
height: 120,
autoDestroy: true,
title: title,
modal: true,
layout: 'fit',
bodyStyle: 'border:none; background-color: transparent;',
buttonAlign: 'center',
items: [{
xtype: 'container',
html: message
}],
buttons: [{
text: 'Ok',
listeners: {
click: {
fn: function (item, e) {
this.up('window').close();
}
}
}
}]
}).show();
}
for(i = 1; i <= 3; i++ ) myAlert('message ' + i, 'content of message ' + i);

Answer 2

You cannot achieve this with the Ext.MessageBox because it is a singleton and there is no way to guarantee that the previous alert was reset before you are updating the properties for the next alert. Only one can be visible at a time and back to back alerts with no blocking will cause you timing issues.
"Busy-Blocking" is also bad anyway because there is no "Await-Callback" in javascript.