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