Automatically closing MessageBox/Showing differnt boxes based on success/error store

[infernoz]

Hello,

I am trying to show a MessageBox at a certain point in my application, and I would like it to automatically close after a certain number of seconds whether a user pressed a button or not. How can this be done in ExtJS 4?

Here is the message box I have, was trying to work with a listener on the MessageBox but that was not working:


Ext.Msg.show({
title:'ABC',
msg: 'DEF',
listeners: {
'afterrender': function() {

//sleep somehow for 3 seconds???
this.destroy();
}
},
animateTarget: submitButton,
icon: Ext.Msg.INFO,
closable: false
});

Also, this message would pop up after I called a store.sync() which initiates an ajax proxy. I would like one message to be returned if the sync succeeds and a different message to pop up if there was an error. I know of the successProperty in the reader of the proxy but not sure if that will help me here.

Thanks,

infernoz

[scottmartin]

See if this helps:



var mb = Ext.MessageBox.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
icon: Ext.Msg.INFO,
buttons: Ext.MessageBox.OK,
closable: false,
fn:function(btn) { } // singleton
});

setTimeout(function(){
mb.close();
}, 2000);


Regards,
Scott.

[infernoz]

Thanks Scott, works great. I did not see the setTimeout() function in the ext docs but I guess thats because it is a pure javascript functionality. I'm new to front end development in general so this assistance is greatly appreciated!

Regarding different messages, I would like to display a different type of message if my store.sync() returns a failure code, or an http 500 message gets sent back (maybe the same case, I'm not sure). How can I differentiate between these two situations and show an error message on one case, and a info message on the other?

As I mentioned earlier, I know of the successProperty in the reader of the proxy but not sure if that will help me here.

Cheers,

infernoz

[scottmartin]

You can do can place a exception listener on your model to catch incoming errors:



listeners: {
exception: function(proxy, response, operation){
// display your message
}
}


If you want to add a little flare to your app, you may want to have a look at
http://www.sencha.com/forum/showthread.php?145503-Ext.ux.window.Notification&highlight=notification

See the online demo. Nice extension for display notification windows.

Regards,
Scott.