docs/source/progress-bar.html

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