examples/simple-widgets/progress-bar.js

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