Embedding a progress bar in a status bar

This recipe explains how to embed a progress bar in a panel's status bar, a scenario found in countless user interfaces:

How to do it...

1. 1. Create a click handler that will simulate a long-running activity and update the progress bar:

   Ext.onReady(function() {
   var loadFn = function(btn, statusBar) {
   btn = Ext.getCmp(btn);
   btn.disable();
   Ext.fly('statusTxt').update('Saving...');
   pBar.wait({
   interval: 200,
   duration: 5000,
   increment: 15,
   fn: function() {
   btn.enable();
   Ext.fly('statusTxt').update('Done');
   }
   });
   };
   

2. 2. Create an instance of the progress bar:

   var pBar = new Ext.ProgressBar({
   id: 'pBar',
   width: 100
   });
   

3. 3. Create a host panel and embed the progress bar in the bbar of the panel. Also, add a button that will start the progress bar updates:

   var pnl = new Ext.Panel({
   title: 'Status bar with progress bar',
   renderTo: 'pnl1',
   width: 400,
   height: 200,
   bodyStyle: 'padding:10px;',
   items: [{
   xtype: 'button',
   id: 'btn',
   text: 'Save',
   width:'75',
   handler:...