Rendering issue in Ext.Msg package / 1.1.0

[soros]

I encountered a rendering issue when a different size of a message boxes are displayed. For example, in my application first I display the following message:



Ext.Msg.confirm(
"Confirmation",
"Are you sure you want to proceed?",
function(btn) {
if (btn === 'yes') {
// do something…
}
},
this
);


... later on a user might be prompted with the following message:



Ext.Msg.prompt(
'Comment Required',
'Please enter a comment?',
function(btn, comment){
// do something…
},
this,
true,
null,
{placeholder : 'Your comment...'}
);


The second message box is not rendered properly, the size is not recalculated so it takes size of the confirm() dialog box.

Regardless of the order of calls, the size of the first message box stays until you refresh browser.

I attached the screen shots.

25494
25495

[danmux]

There are a few threads on this - it boils down to Ext.Msg being a singleton or lets say this implementation of singleton.

Here is some hackery that someone posted (cant remember so cant credit - apologies) which destroys and recreates the msg box each time - The recreate instead of resize is because of some issues with the old html getting in the way of other layouts (afair)




/ this so that the messagebox is redrawn and resized on each showing
resetMsgBox = function() {
Ext.Msg = new Ext.MessageBox();
Ext.Msg.on({
hide: function(component) { component.destroy(); },
destroy: function(component) { resetMsgBox(); }
});
};
resetMsgBox();