Dispalying more than one message box one after other

问题

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

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

回答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.

来源：https://stackoverflow.com/questions/21703828/dispalying-more-than-one-message-box-one-after-other

标签

extjs