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