View Full Version : Displaying more than one message box one after other

11 Feb 2014, 6:10 AM
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);

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'){
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
if(messageQueueStore.count() != 0){

// 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.
Note : not displaying the close button is not an option

11 Feb 2014, 8:20 AM
Are you saying that your function is not called when the cancel (x) button is used?

I tried the below code in the console on the MessageBox example page for the current Ext version (using Firefox v17, IE 9, and IE9 in compatibility mode). My function is called whether OK or (x) is pressed.

title: 'Title',
msg: 'Text',
buttons: Ext.Msg.OK,
fn: function (buttonId) {
console.log('in function buttonId=' + buttonId);

result in console when (x) clicked :

in function buttonId=cancel

The Ext.MessageBox.show method's config object doesn't list listener (unless I missed it) so I don't see how those listeners would work. Since the function is called in both cases I am not sure why you need the listeners. If I missed your point, please explain further.

11 Feb 2014, 9:15 AM
Hello MNRashmi,
Please look at this snippet, I guess this makes your thoughts clear..

Ext.create('Ext.window.Window', { title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'grid',
border: false,
columns: [{header: 'World'}],
store: Ext.create('Ext.data.ArrayStore', {})
closable : false,// remove the default closing tool
tools : [{
// duplicate the tool here with a handler
handler : function(){


11 Feb 2014, 10:57 PM
The sample posted by carol.ext works perfectly fine when tried in some extjs editor. However when using in my code i still don't get a call to my function when (x) button is pressed.

Could it be something to do with the EXTJS version. We are using EXTJS 4. in fiddle i tried by changing the extjs version, however when verison less than 4.2.0 the close button is not displayed at all :(