--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.onReady(function(){\r
+ //==== Progress bar 1 ====\r
+ var pbar1 = new Ext.ProgressBar({\r
+ text:'Initializing...'\r
+ });\r
+ var btn1 = Ext.get('btn1');\r
+ btn1.on('click', function(){\r
+ Ext.fly('p1text').update('Working');\r
+ if (!pbar1.rendered){\r
+ pbar1.render('p1');\r
+ }else{\r
+ pbar1.text = 'Initializing...';\r
+ pbar1.show();\r
+ }\r
+ Runner.run(pbar1, Ext.get('btn1'), 10, function(){\r
+ pbar1.reset(true);\r
+ Ext.fly('p1text').update('Done.').show();\r
+ });\r
+ });\r
+\r
+ //==== Progress bar 2 ====\r
+ var pbar2 = new Ext.ProgressBar({\r
+ text:'Ready',\r
+ id:'pbar2',\r
+ cls:'left-align',\r
+ renderTo:'p2'\r
+ });\r
+ var btn2 = Ext.get('btn2');\r
+ btn2.on('click', function(){\r
+ Runner.run(pbar2, btn2, 12, function(){\r
+ pbar2.reset();\r
+ pbar2.updateText('Done.');\r
+ });\r
+ });\r
+\r
+ //==== Progress bar 3 ====\r
+ var pbar3 = new Ext.ProgressBar({\r
+ id:'pbar3',\r
+ width:300,\r
+ renderTo:'p3'\r
+ });\r
+ pbar3.on('update', function(val){\r
+ //You can handle this event at each progress interval if\r
+ //needed to perform some other action\r
+ Ext.fly('p3text').dom.innerHTML += '.';\r
+ });\r
+ var btn3 = Ext.get('btn3');\r
+ btn3.on('click', function(){\r
+ Ext.fly('p3text').update('Working');\r
+ btn3.dom.disabled = true;\r
+ pbar3.wait({\r
+ interval:200,\r
+ duration:5000,\r
+ increment:15,\r
+ fn:function(){\r
+ btn3.dom.disabled = false;\r
+ Ext.fly('p3text').update('Done');\r
+ }\r
+ });\r
+ });\r
+\r
+ //==== Progress bar 4 ====\r
+ var pbar4 = new Ext.ProgressBar({\r
+ text:'Waiting on you...',\r
+ id:'pbar4',\r
+ textEl:'p4text',\r
+ cls:'custom',\r
+ renderTo:'p4'\r
+ });\r
+ var btn4 = Ext.get('btn4');\r
+ btn4.on('click', function(){\r
+ Runner.run(pbar4, btn4, 19, function(){\r
+ pbar4.updateText('All finished!');\r
+ });\r
+ });\r
+});\r
+\r
+//Please do not use the following code as a best practice! :)\r
+var Runner = function(){\r
+ var f = function(v, pbar, btn, count, cb){\r
+ return function(){\r
+ if(v > count){\r
+ btn.dom.disabled = false;\r
+ cb();\r
+ }else{\r
+ if(pbar.id=='pbar4'){\r
+ //give this one a different count style for fun\r
+ var i = v/count;\r
+ pbar.updateProgress(i, Math.round(100*i)+'% completed...');\r
+ }else{\r
+ pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');\r
+ }\r
+ }\r
+ };\r
+ };\r
+ return {\r
+ run : function(pbar, btn, count, cb){\r
+ btn.dom.disabled = true;\r
+ var ms = 5000/count;\r
+ for(var i = 1; i < (count+2); i++){\r
+ setTimeout(f(i, pbar, btn, count, cb), i*ms);\r
+ }\r
+ }\r
+ }\r
+}();</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff