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,499
    Vote Rating
    47
    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:

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    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.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi