Question

我要求一个接一个地显示多个信息/提醒消息。

这是我的示例代码

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

当用户点击“确定”按钮时，此功能完全正常。但是，当用户单击消息框右上角的（x）按钮时，将触发我尝试收听的所有事件。因此不会显示后续消息。

有关如何处理消息框上的close事件的任何指示都将非常有用

Answer 1

以下是工作示例：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

使用Ext.MessageBox无法实现此目的，因为它是一个单例，并且在更新下一个警报的属性之前无法保证先前的警报已重置。一次只能看到一个并且没有阻塞的背靠背警报会导致计时问题。

＆＃34;忙阻断＆＃34;反正也是坏事，因为没有＆＃34; Await-Callback＆＃34;在javascript。

一个接一个地显示多个消息框

2 个答案: