examples/simple-widgets/progress-bar.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){\r
   8     //==== Progress bar 1 ====\r
   9     var pbar1 = new Ext.ProgressBar({\r
  10        text:'Initializing...'\r
  11     });\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
  16             pbar1.render('p1');\r
  17         }else{\r
  18             pbar1.text = 'Initializing...';\r
  19             pbar1.show();\r
  20         }\r
  21         Runner.run(pbar1, Ext.get('btn1'), 10, function(){\r
  22             pbar1.reset(true);\r
  23             Ext.fly('p1text').update('Done.').show();\r
  24         });\r
  25     });\r
  26 \r
  27     //==== Progress bar 2 ====\r
  28     var pbar2 = new Ext.ProgressBar({\r
  29         text:'Ready',\r
  30         id:'pbar2',\r
  31         cls:'left-align',\r
  32         renderTo:'p2'\r
  33     });\r
  34     var btn2 = Ext.get('btn2');\r
  35     btn2.on('click', function(){\r
  36         Runner.run(pbar2, btn2, 12, function(){\r
  37             pbar2.reset();\r
  38             pbar2.updateText('Done.');\r
  39         });\r
  40     });\r
  41 \r
  42     //==== Progress bar 3 ====\r
  43     var pbar3 = new Ext.ProgressBar({\r
  44         id:'pbar3',\r
  45         width:300,\r
  46         renderTo:'p3'\r
  47     });\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
  52     });\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
  57         pbar3.wait({\r
  58             interval:200,\r
  59             duration:5000,\r
  60             increment:15,\r
  61             fn:function(){\r
  62                 btn3.dom.disabled = false;\r
  63                 Ext.fly('p3text').update('Done');\r
  64             }\r
  65         });\r
  66     });\r
  67 \r
  68     //==== Progress bar 4 ====\r
  69     var pbar4 = new Ext.ProgressBar({\r
  70         text:'Waiting on you...',\r
  71         id:'pbar4',\r
  72         textEl:'p4text',\r
  73         cls:'custom',\r
  74         renderTo:'p4'\r
  75     });\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
  80         });\r
  81     });\r
  82 });\r
  83 \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
  87         return function(){\r
  88             if(v > count){\r
  89                 btn.dom.disabled = false;\r
  90                 cb();\r
  91             }else{\r
  92                 if(pbar.id=='pbar4'){\r
  93                     //give this one a different count style for fun\r
  94                     var i = v/count;\r
  95                     pbar.updateProgress(i, Math.round(100*i)+'% completed...');\r
  96                 }else{\r
  97                     pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');\r
  98                 }\r
  99             }\r
 100        };\r
 101     };\r
 102     return {\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
 108             }\r
 109         }\r
 110     }\r
 111 }();