extjs/build/examples/classic/simple-widgets/progress-bar.js

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