[2.1][FIXED] Unexpected MessageBox behaviour

**rstuart** · 29 Apr 2008 6:53 PM

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

**Animal** · 29 Apr 2008 11:09 PM

I just run them and couldn't detect anything unexpected happening. Each one showed a progress bar.

The top one displays "Please wait" and "Loading items..."

The bottom one displays "Saving..." and "Saving your data"

**rstuart** · 7 May 2008 11:06 PM

Yes. The problem is the following:

The first message box is a progress dialog, its progress bar is constantly updated with a new percentage. When it is finished, the progress bar says "100% Complete".

Under Linux (Ubuntu) using firefox 2 & 3, the second message box (a wait dialog) also has a progress bar the displays the text "100% Complete". This is the bug. The text for the progress bar is explicitly set to be empty however, when displayed after the progress dialog, the text is always "100% Complete".

Can you please have a look at the original example and tell me if you see the same behaviour?

**krogers** · 8 May 2008 6:31 PM

When trying this example given I get the same problem. It definitely seems related to Ext.MessageBox objects that have a loading bar, because if I switch the creation of the second box from MessageBox.wait() to MessageBox.alert(), it displays the correct text.

**rstuart** · 8 May 2008 6:41 PM

Animal or anyone else from the Ext team, if you can confirm this behavior, can you also move this thread into the bug section please. I get the behavior when using both Ext 2.1 and Ext 2.0.2.

**mystix** · 9 May 2008 10:08 AM

Verified.

here's a simplified drop-in test case

Code:

<html>
<head>
<link rel="stylesheet" href="../resources/css/ext-all.css">

<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all-debug.js"></script>
<script>
  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);
    });
  });
</script>
</head>
<body>
  <button id="mb6">Show Progress Dialog</button>
  <button id="mb7">Show Wait Dialog</button>
</body>
</html>

given the above configuration (note red config), the Wait Dialog (correctly) appears like this if it is shown before the Progress Dialog:

however, if the Progress Dialog is shown before the Wait Dialog, the Wait Dialog appears as such:

**brian.moeskau** · 9 May 2008 11:29 AM

Thanks, fixed in SVN.

ProgressBar.wait() (and by extension, MsgBox.wait's waitConfig object) now supports an optional text arg as well, which defaults to '' and will clear any existing text by default, or you can add a static string to display in the progress element while waiting, which it did not support previously.

[2.1][FIXED] Unexpected MessageBox behaviour

Thread Tools

Search Thread

Display

[2.1][FIXED] Unexpected MessageBox behaviour

[2.1][FIXED] Unexpected MessageBox behaviour