Changing the look of a progress bar

In this recipe, you will learn how easy it is to change the look of the progress bar.

Let's see how it is done.

How to do it...

1. 1. Create the styles for the custom look of the progress bar:

   .x-progress-wrap.custom {
   height:17px;
   border:1px solid #cccccc;
   overflow:hidden;
   padding:0 2px;
   }
   .ext-ie .x-progress-wrap.custom {
   height:19px;
   }
   .custom .x-progress-inner {
   height:17px;
   background: #fff;
   }
   .custom .x-progress-bar {
   height:15px;
   background:transparent url(img/pbar.gif) repeat-x 0 0;
   border-top:1px solid #BEBEBE;
   border-bottom:1px solid #EFEFEF;
   border-right:0;
   }
   

2. 2. Define the progress bar and specify that it will use the custom CSS class:

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

3. 3. Now, create a handler for the progress bar's update event that will change the status message shown on the page:

   pBar.on('update', function(val) {
   //Handle this event if you need to
   // execute code...