一个接一个地显示多个消息框 [英] Dispalying more than one message box one after other

问题描述

这是我的示例代码

  var messageQueueStore = Ext.create（'Ext.data.Store'，{
 fields：['type'，'Title'，'text'，'buttonConfig' 'callback']，
 storeId：'messageQueueStore'
}）; 
 
 
函数displayMessage（type，Title，Text，buttonConfig，callback）{
 messageQueueStore.loadData（[{type：type，Title：Title，Text：Text，buttonConfig： buttonConfig，callback：callback}]，true）; 
 if（！Ext.MessageBox.isVisible（））{
 displayEachMessage（）; 
} 
} 
 
函数displayEachMessage（）{
 var firstRecord = messageQueueStore.getAt（0）; 
 //我们目前只处理警报消息。如果需要，这个方法可以扩展来处理其他类型的消息
 if（firstRecord.get（'type'）=='alert'）{
 Ext.MessageBox.show（{
 title ：firstRecord.get（'Title'），
 msg：firstRecord.get（'Text'），
按钮：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 
 }）
} 
} 
 
函数messageClosed（）{
 //关闭事件还需要处理
 messageQueueStore.removeAt（0） ; 
 if（messageQueueStore.count（）！= 0）{
 displayEachMessage（）; 
} 
} 
 
 
 //这是我如何使用这个功能
 displayMessage（'alert'，'first'，你现在看到第一条消息）; 
 displayMessage（'alert'，'second'，这是第二条消息）; 
 displayMessage（'alert'，'third'，Here which the third）; 
 displayMessage（'alert'，'第四'，这是最后一个）; 
  

当用户单击确定按钮时，这工作非常正常。但是，当用户单击消息框右上角的（x）按钮时，我不想触发任何事件。
因此后续的消息不会显示。

任何关于如何处理消息框关闭事件的指针都将非常有帮助

解决方案

这里是工作示例： http： //jsfiddle.net/kTpct/2/

  function myAlert（title，message）{
 Ext.create（'Ext.window.Window'，{
 width：300，
 height：120，
 autoDestroy：true，
 title：title，
 modal ：
布局：'fit'，
 bodyStyle：'border：none; background-color：transparent;'，
 buttonAlign：'center'，
 items：[{ 
 xtype：'container'，
 html：message 
}]，
按钮：[{
 text：'Ok'，
 listeners：{
点击：{
 fn：function（item，e）{
 。this.up（窗口）接近（）; 
} 
} 
} 
}] 
}）。show（）; （i = 1; i< = 3; i ++）myAlert（'message'+ i''message'+ i的内容）
} 
 
 
  

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

解决方案

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

这篇关于一个接一个地显示多个消息框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！