+++ /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