Using a progress bar to indicate that your application is busy

This recipe teaches you how to use a progress bar to indicate that your application is busy performing an operation. The next screenshot shows a progress bar built using this recipe:

How to do it...

1. 1. Define the progress bar:

   Ext.onReady(function() {
   Ext.QuickTips.init();
   var pBar = new Ext.ProgressBar({
   id: 'pBar',
   width: 300,
   renderTo: 'pBarDiv'
   });
   

2. 2. Add a handler for the update event and use it to update the wait message:

   pBar.on('update', function(val) {
   //Handle this event if you need to
   // execute code at each progress interval.
   Ext.fly('pBarText').dom.innerHTML += '.';
   });
   

3. 3. Create a click handler for the button that will simulate a long-running activity:

   var btn = Ext.get('btn');
   btn.on('click', function() {
   Ext.fly('pBarText').update('Please wait');
   btn.dom.disabled = true;
   pBar.wait({
   interval: 200,
   duration: 5000,
   increment: 15,
   fn: function() {
   btn.dom.disabled = false;
   Ext.fly('pBarText').update('Done');
   }
   });
   }...