examples/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     //==== Progress bar 1 ====
  36     var pbar1 = Ext.create('Ext.ProgressBar', {
  37        text:'Initializing...'
  38     });
  39
  40     var btn1 = Ext.get('btn1');
  41     btn1.on('click', function() {
  42         Ext.fly('p1text').update('Working');
  43         if (!pbar1.rendered) {
  44             pbar1.render('p1');
  45         } else {
  46             pbar1.text = 'Initializing...';
  47             pbar1.show();
  48         }
  49         Runner.run(pbar1, Ext.get('btn1'), 10, function() {
  50             pbar1.reset(true);
  51             Ext.fly('p1text').update('Done.').show();
  52         });
  53     });
  54
  55     //==== Progress bar 2 ====
  56     var pbar2 = Ext.create('Ext.ProgressBar', {
  57         text:'Ready',
  58         id:'pbar2',
  59         cls:'left-align',
  60         renderTo:'p2'
  61     });
  62
  63     var btn2 = Ext.get('btn2');
  64
  65     btn2.on('click', function() {
  66         Runner.run(pbar2, btn2, 12, function() {
  67             pbar2.reset();
  68             pbar2.updateText('Done.');
  69         });
  70     });
  71
  72     //==== Progress bar 3 ====
  73     var pbar3 = Ext.create('Ext.ProgressBar', {
  74         id:'pbar3',
  75         width:300,
  76         renderTo:'p3'
  77     });
  78
  79     pbar3.on('update', function(val) {
  80         //You can handle this event at each progress interval if
  81         //needed to perform some other action
  82         Ext.fly('p3text').dom.innerHTML += '.';
  83     });
  84
  85     var btn3 = Ext.get('btn3');
  86
  87     btn3.on('click', function(){
  88         Ext.fly('p3text').update('Working');
  89         btn3.dom.disabled = true;
  90         pbar3.wait({
  91             interval: 200,
  92             duration: 5000,
  93             increment: 15,
  94             fn:function() {
  95                 btn3.dom.disabled = false;
  96                 Ext.fly('p3text').update('Done');
  97             }
  98         });
  99     });
 100
 101     //==== Progress bar 4 ====
 102     var pbar4 = Ext.create('Ext.ProgressBar', {
 103         text:'Waiting on you...',
 104         id:'pbar4',
 105         textEl:'p4text',
 106         cls:'custom',
 107         renderTo:'p4'
 108     });
 109
 110     var btn4 = Ext.get('btn4');
 111
 112     btn4.on('click', function() {
 113         Runner.run(pbar4, btn4, 19, function() {
 114             pbar4.updateText('All finished!');
 115         });
 116     });
 117 });