Ext.js - Progress Bar

This is used to show the progress of the work done and to show that the backend work is still in progress, hence wait until its done.

Syntax

It is basically a message box showing the progress of the task. Following is a simple syntax to create a Progress bar.

Ext.MessageBox.show ({
   title: 'Please wait',
   msg: 'Loading items...',
   progressText: 'Initializing...',
   width:300,
   progress:true,
   closable:false
});

Example

Following is a simple example showing a Progress bar.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {    
            function progressBar(v) {
               return function()	{
                  if(v == 10) {
                     Ext.MessageBox.hide();
                     result();
                  } else {
                     var i = v/9;
                     Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
                  }
               };
            };
            function showProgressBar() {
               for(var i = 1; i < 11; i++) {
                  setTimeout(progressBar(i), i*500);
               }
            }
            function result() {
               Ext.Msg.alert('status', 'Process completed succesfully');
            }
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('buttonId'),
               text: 'Click Me',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.show ({
                        title: 'Please wait',
                        msg: 'Loading items...',
                        progressText: 'Initializing...',
                        width:300,
                        progress:true,
                        closable:false
                     });
                     showProgressBar();
                  }
               }
            });
         });
      </script>
   </head>
   
   <body>
      <p> Click the button to see progress bar  </p>
      <div id = "buttonId"></div>
   </body>
</html>

The above program will produce the following result −

extjs_components.htm
Advertisements