/ext-4.1.0_b3/examples/simple-widgets/progress-bar.js
JavaScript | 117 lines | 96 code | 13 blank | 8 comment | 5 complexity | f3a71c26c58da3def6670889df645447 MD5 | raw file
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});