3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
7 Ext.onReady(function(){
\r
8 //==== Progress bar 1 ====
\r
9 var pbar1 = new Ext.ProgressBar({
\r
10 text:'Initializing...'
\r
12 var btn1 = Ext.get('btn1');
\r
13 btn1.on('click', function(){
\r
14 Ext.fly('p1text').update('Working');
\r
15 if (!pbar1.rendered){
\r
18 pbar1.text = 'Initializing...';
\r
21 Runner.run(pbar1, Ext.get('btn1'), 10, function(){
\r
23 Ext.fly('p1text').update('Done.').show();
\r
27 //==== Progress bar 2 ====
\r
28 var pbar2 = new Ext.ProgressBar({
\r
34 var btn2 = Ext.get('btn2');
\r
35 btn2.on('click', function(){
\r
36 Runner.run(pbar2, btn2, 12, function(){
\r
38 pbar2.updateText('Done.');
\r
42 //==== Progress bar 3 ====
\r
43 var pbar3 = new Ext.ProgressBar({
\r
48 pbar3.on('update', function(val){
\r
49 //You can handle this event at each progress interval if
\r
50 //needed to perform some other action
\r
51 Ext.fly('p3text').dom.innerHTML += '.';
\r
53 var btn3 = Ext.get('btn3');
\r
54 btn3.on('click', function(){
\r
55 Ext.fly('p3text').update('Working');
\r
56 btn3.dom.disabled = true;
\r
62 btn3.dom.disabled = false;
\r
63 Ext.fly('p3text').update('Done');
\r
68 //==== Progress bar 4 ====
\r
69 var pbar4 = new Ext.ProgressBar({
\r
70 text:'Waiting on you...',
\r
76 var btn4 = Ext.get('btn4');
\r
77 btn4.on('click', function(){
\r
78 Runner.run(pbar4, btn4, 19, function(){
\r
79 pbar4.updateText('All finished!');
\r
84 //Please do not use the following code as a best practice! :)
\r
85 var Runner = function(){
\r
86 var f = function(v, pbar, btn, count, cb){
\r
89 btn.dom.disabled = false;
\r
92 if(pbar.id=='pbar4'){
\r
93 //give this one a different count style for fun
\r
95 pbar.updateProgress(i, Math.round(100*i)+'% completed...');
\r
97 pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');
\r
103 run : function(pbar, btn, count, cb){
\r
104 btn.dom.disabled = true;
\r
105 var ms = 5000/count;
\r
106 for(var i = 1; i < (count+2); i++){
\r
107 setTimeout(f(i, pbar, btn, count, cb), i*ms);
\r