/ext-4.1.0_b3/examples/simple-widgets/progress-bar.js

  1Ext.require([
  2    'Ext.ProgressBar'
  3]);
  4
  5Ext.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});