examples/simple-widgets/progress-bar.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 Ext.onReady(function(){
   8     //==== Progress bar 1 ====
   9     var pbar1 = new Ext.ProgressBar({
  10        text:'Initializing...'
  11     });
  12     var btn1 = Ext.get('btn1');
  13     btn1.on('click', function(){
  14         Ext.fly('p1text').update('Working');
  15         if (!pbar1.rendered){
  16             pbar1.render('p1');
  17         }else{
  18             pbar1.text = 'Initializing...';
  19             pbar1.show();
  20         }
  21         Runner.run(pbar1, Ext.get('btn1'), 10, function(){
  22             pbar1.reset(true);
  23             Ext.fly('p1text').update('Done.').show();
  24         });
  25     });
  26
  27     //==== Progress bar 2 ====
  28     var pbar2 = new Ext.ProgressBar({
  29         text:'Ready',
  30         id:'pbar2',
  31         cls:'left-align',
  32         renderTo:'p2'
  33     });
  34     var btn2 = Ext.get('btn2');
  35     btn2.on('click', function(){
  36         Runner.run(pbar2, btn2, 12, function(){
  37             pbar2.reset();
  38             pbar2.updateText('Done.');
  39         });
  40     });
  41
  42     //==== Progress bar 3 ====
  43     var pbar3 = new Ext.ProgressBar({
  44         id:'pbar3',
  45         width:300,
  46         renderTo:'p3'
  47     });
  48     pbar3.on('update', function(val){
  49         //You can handle this event at each progress interval if
  50         //needed to perform some other action
  51         Ext.fly('p3text').dom.innerHTML += '.';
  52     });
  53     var btn3 = Ext.get('btn3');
  54     btn3.on('click', function(){
  55         Ext.fly('p3text').update('Working');
  56         btn3.dom.disabled = true;
  57         pbar3.wait({
  58             interval:200,
  59             duration:5000,
  60             increment:15,
  61             fn:function(){
  62                 btn3.dom.disabled = false;
  63                 Ext.fly('p3text').update('Done');
  64             }
  65         });
  66     });
  67
  68     //==== Progress bar 4 ====
  69     var pbar4 = new Ext.ProgressBar({
  70         text:'Waiting on you...',
  71         id:'pbar4',
  72         textEl:'p4text',
  73         cls:'custom',
  74         renderTo:'p4'
  75     });
  76     var btn4 = Ext.get('btn4');
  77     btn4.on('click', function(){
  78         Runner.run(pbar4, btn4, 19, function(){
  79             pbar4.updateText('All finished!');
  80         });
  81     });
  82 });
  83
  84 //Please do not use the following code as a best practice! :)
  85 var Runner = function(){
  86     var f = function(v, pbar, btn, count, cb){
  87         return function(){
  88             if(v > count){
  89                 btn.dom.disabled = false;
  90                 cb();
  91             }else{
  92                 if(pbar.id=='pbar4'){
  93                     //give this one a different count style for fun
  94                     var i = v/count;
  95                     pbar.updateProgress(i, Math.round(100*i)+'% completed...');
  96                 }else{
  97                     pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');
  98                 }
  99             }
 100        };
 101     };
 102     return {
 103         run : function(pbar, btn, count, cb){
 104             btn.dom.disabled = true;
 105             var ms = 5000/count;
 106             for(var i = 1; i < (count+2); i++){
 107                setTimeout(f(i, pbar, btn, count, cb), i*ms);
 108             }
 109         }
 110     }
 111 }();