Hybrid View

  1. #1
    Ext JS Premium Member rstuart's Avatar
    Join Date
    Jan 2008
    Location
    Brisbane, Australia
    Posts
    140
    Vote Rating
    4
    rstuart is on a distinguished road

      0  

    Question [2.1][FIXED] Unexpected MessageBox behaviour

    [2.1][FIXED] Unexpected MessageBox behaviour


    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
    Last edited by mystix; 9 May 2008 at 10:14 AM. Reason: moved from Open Discussion to 2.x Bugs

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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"

  3. #3
    Ext JS Premium Member rstuart's Avatar
    Join Date
    Jan 2008
    Location
    Brisbane, Australia
    Posts
    140
    Vote Rating
    4
    rstuart is on a distinguished road

      0  

    Default


    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?

  4. #4
    Ext User
    Join Date
    Feb 2008
    Location
    Brisbane, Australia
    Posts
    23
    Vote Rating
    1
    krogers is on a distinguished road

      0  

    Default


    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.

  5. #5
    Ext JS Premium Member rstuart's Avatar
    Join Date
    Jan 2008
    Location
    Brisbane, Australia
    Posts
    140
    Vote Rating
    4
    rstuart is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    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: