Hi all,
I have come across some unexpected behavior with the Ext.MessageBox class. I was hoping someone could verify that I'm indeed not doing something wrong and what happening is a little strange.
The problem I'm having is that when you display a progress dialog with text in the progress bar, do some updates of the progress bar then hide the window, any subsequent MessageBox incarnations with a progress bar (ie MessageBox.wait) will have the text last displayed in the progress bar of the progress dialog in its progress bar, and there doesn't seem to be a way to get rid of it.
Below are two simple files that will recreate the problem. If you save them under the message-box folder in the examples of the ext 2.1 release, they should just work.
html:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MessageBox</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="test.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<style type="text/css">
.x-window-dlg .ext-mb-download {
background:transparent url(images/download.gif) no-repeat top left;
height:46px;
}
</style>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<h1>MessageBox Dialogs</h1>
<p>
<b>Progress Dialog</b><br />
Dialog with measured progress bar.
<button id="mb6">Show</button>
</p>
<p>
<b>Wait Dialog</b><br />
Dialog with indefinite progress bar and custom icon (will close after 8 sec).
<button id="mb7">Show</button>
</p>
</html>
JS:
Code:
Ext.onReady(function(){
Ext.get('mb6').on('click', function(){
Ext.MessageBox.show({
title: 'Please wait',
msg: 'Loading items...',
progressText: 'Initializing...',
width:300,
progress:true,
closable:false,
aniEl:'mb6'
});
// this hideous block creates the bogus progress
var f = function(v){
return function(){
if(v == 12){
Ext.MessageBox.hide();
}else{
var i = v/11;
Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
}
};
};
for(var i = 1; i < 13; i++){
setTimeout(f(i), i*500);
}
});
Ext.get('mb7').on('click', function(){
Ext.MessageBox.wait('Saving your data', 'Saving...', {text:''});
setTimeout(function(){
//This simulates a long-running operation like a database save or XHR call.
//In real code, this would be in a callback function.
Ext.MessageBox.hide();
}, 4000);
});
function showResult(btn){
Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
};
function showResultText(btn, text){
Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
};
});
Cheers