source: trunk/web/addons/job_monarch/lib/extjs-30/examples/simple-widgets/progress-bar.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

  • new ExtJS 3.0
File size: 3.1 KB
Line 
1/*!
2 * Ext JS Library 3.0.0
3 * Copyright(c) 2006-2009 Ext JS, LLC
4 * licensing@extjs.com
5 * http://www.extjs.com/license
6 */
7Ext.onReady(function(){
8    //==== Progress bar 1 ====
9    var pbar1 = new Ext.ProgressBar({
10       text:'Initializing...'
11    });
12    var btn1 = Ext.get('btn1');
13    btn1.on('click', function(){
14        Ext.fly('p1text').update('Working');
15        if (!pbar1.rendered){
16            pbar1.render('p1');
17        }else{
18            pbar1.text = 'Initializing...';
19            pbar1.show();
20        }
21        Runner.run(pbar1, Ext.get('btn1'), 10, function(){
22            pbar1.reset(true);
23            Ext.fly('p1text').update('Done.').show();
24        });
25    });
26
27    //==== Progress bar 2 ====
28    var pbar2 = new Ext.ProgressBar({
29        text:'Ready',
30        id:'pbar2',
31        cls:'left-align',
32        renderTo:'p2'
33    });
34    var btn2 = Ext.get('btn2');
35    btn2.on('click', function(){
36        Runner.run(pbar2, btn2, 12, function(){
37            pbar2.reset();
38            pbar2.updateText('Done.');
39        });
40    });
41
42    //==== Progress bar 3 ====
43    var pbar3 = new Ext.ProgressBar({
44        id:'pbar3',
45        width:300,
46        renderTo:'p3'
47    });
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 += '.';
52    });
53    var btn3 = Ext.get('btn3');
54    btn3.on('click', function(){
55        Ext.fly('p3text').update('Working');
56        btn3.dom.disabled = true;
57        pbar3.wait({
58            interval:200,
59            duration:5000,
60            increment:15,
61            fn:function(){
62                btn3.dom.disabled = false;
63                Ext.fly('p3text').update('Done');
64            }
65        });
66    });
67
68    //==== Progress bar 4 ====
69    var pbar4 = new Ext.ProgressBar({
70        text:'Waiting on you...',
71        id:'pbar4',
72        textEl:'p4text',
73        cls:'custom',
74        renderTo:'p4'
75    });
76    var btn4 = Ext.get('btn4');
77    btn4.on('click', function(){
78        Runner.run(pbar4, btn4, 19, function(){
79            pbar4.updateText('All finished!');
80        });
81    });
82});
83
84//Please do not use the following code as a best practice! :)
85var Runner = function(){
86    var f = function(v, pbar, btn, count, cb){
87        return function(){
88            if(v > count){
89                btn.dom.disabled = false;
90                cb();
91            }else{
92                if(pbar.id=='pbar4'){
93                    //give this one a different count style for fun
94                    var i = v/count;
95                    pbar.updateProgress(i, Math.round(100*i)+'% completed...');
96                }else{
97                    pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');
98                }
99            }
100       };
101    };
102    return {
103        run : function(pbar, btn, count, cb){
104            btn.dom.disabled = true;
105            var ms = 5000/count;
106            for(var i = 1; i < (count+2); i++){
107               setTimeout(f(i, pbar, btn, count, cb), i*ms);
108            }
109        }
110    }
111}();
Note: See TracBrowser for help on using the repository browser.