JavaScript DHTML/Ext JS/ProgressBar
Содержание
ProgressBar: Rendered on page load, left-aligned text and % width
<source lang="html4strict">
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
// Progress bar 1 var pbar1 = new Ext.ProgressBar({ text:"Initializing..." }); var btn1 = Ext.get("btn1"); btn1.on("click", function(){ Ext.fly("p1text").update("Working"); if (!pbar1.rendered){ pbar1.render("p1"); }else{ pbar1.text = "Initializing..."; pbar1.show(); } Runner.run(pbar1, Ext.get("btn1"), 10, function(){ pbar1.reset(true); Ext.fly("p1text").update("Done.").show(); }); }); // Progress bar 2 var pbar2 = new Ext.ProgressBar({ text:"Ready", id:"pbar2", cls:"left-align", renderTo:"p2" }); var btn2 = Ext.get("btn2"); btn2.on("click", function(){ Runner.run(pbar2, btn2, 12, function(){ pbar2.reset(); pbar2.updateText("Done."); }); }); // Progress bar 3 var pbar3 = new Ext.ProgressBar({ id:"pbar3", width:300, renderTo:"p3" }); pbar3.on("update", function(val){ //You can handle this event at each progress interval if //needed to perform some other action Ext.fly("p3text").dom.innerHTML += "."; }); var btn3 = Ext.get("btn3"); btn3.on("click", function(){ Ext.fly("p3text").update("Working"); btn3.dom.disabled = true; pbar3.wait({ interval:200, duration:5000, increment:15, fn:function(){ btn3.dom.disabled = false; Ext.fly("p3text").update("Done"); } }); }); // Progress bar 4 var pbar4 = new Ext.ProgressBar({ text:"Waiting on you...", id:"pbar4", textEl:"p4text", cls:"custom", renderTo:"p4" }); var btn4 = Ext.get("btn4"); btn4.on("click", function(){ Runner.run(pbar4, btn4, 19, function(){ pbar4.updateText("All finished!"); }); });
}); //Please do not use the following code as a best practice! :) var Runner = function(){
var f = function(v, pbar, btn, count, cb){ return function(){ if(v > count){ btn.dom.disabled = false; cb(); }else{ if(pbar.id=="pbar4"){ //give this one a different count style for fun var i = v/count; pbar.updateProgress(i, Math.round(100*i)+"% completed..."); }else{ pbar.updateProgress(v/count, "Loading item " + v + " of "+count+"..."); } } }; }; return { run : function(pbar, btn, count, cb){ btn.dom.disabled = true; var ms = 5000/count; for(var i = 1; i < (count+2); i++){ setTimeout(f(i, pbar, btn, count, cb), i*ms); } } }
}(); </script> </head> <body>
Progress Bar
Basic Progress Bar
Deferred rendering, dynamic show/hide and built-in progress text:
<button id="btn1">Show</button>
Additional Options
Rendered on page load, left-aligned text and % width:
<button id="btn2">Show</button>
Waiting Bar
Wait for a long operation to complete (example will stop after 5 secs):
<button id="btn3">Show</button>
Ready
Custom Styles
Rendered like Windows XP with custom progress text element:
<button id="btn4">Show</button>
</body> </html>
</source>
Rendered like Windows XP with custom progress text element
<source lang="html4strict">
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
// Progress bar 1 var pbar1 = new Ext.ProgressBar({ text:"Initializing..." }); var btn1 = Ext.get("btn1"); btn1.on("click", function(){ Ext.fly("p1text").update("Working"); if (!pbar1.rendered){ pbar1.render("p1"); }else{ pbar1.text = "Initializing..."; pbar1.show(); } Runner.run(pbar1, Ext.get("btn1"), 10, function(){ pbar1.reset(true); Ext.fly("p1text").update("Done.").show(); }); }); // Progress bar 2 var pbar2 = new Ext.ProgressBar({ text:"Ready", id:"pbar2", cls:"left-align", renderTo:"p2" }); var btn2 = Ext.get("btn2"); btn2.on("click", function(){ Runner.run(pbar2, btn2, 12, function(){ pbar2.reset(); pbar2.updateText("Done."); }); }); // Progress bar 3 var pbar3 = new Ext.ProgressBar({ id:"pbar3", width:300, renderTo:"p3" }); pbar3.on("update", function(val){ //You can handle this event at each progress interval if //needed to perform some other action Ext.fly("p3text").dom.innerHTML += "."; }); var btn3 = Ext.get("btn3"); btn3.on("click", function(){ Ext.fly("p3text").update("Working"); btn3.dom.disabled = true; pbar3.wait({ interval:200, duration:5000, increment:15, fn:function(){ btn3.dom.disabled = false; Ext.fly("p3text").update("Done"); } }); }); // Progress bar 4 var pbar4 = new Ext.ProgressBar({ text:"Waiting on you...", id:"pbar4", textEl:"p4text", cls:"custom", renderTo:"p4" }); var btn4 = Ext.get("btn4"); btn4.on("click", function(){ Runner.run(pbar4, btn4, 19, function(){ pbar4.updateText("All finished!"); }); });
}); //Please do not use the following code as a best practice! :) var Runner = function(){
var f = function(v, pbar, btn, count, cb){ return function(){ if(v > count){ btn.dom.disabled = false; cb(); }else{ if(pbar.id=="pbar4"){ //give this one a different count style for fun var i = v/count; pbar.updateProgress(i, Math.round(100*i)+"% completed..."); }else{ pbar.updateProgress(v/count, "Loading item " + v + " of "+count+"..."); } } }; }; return { run : function(pbar, btn, count, cb){ btn.dom.disabled = true; var ms = 5000/count; for(var i = 1; i < (count+2); i++){ setTimeout(f(i, pbar, btn, count, cb), i*ms); } } }
}(); </script> </head> <body>
Progress Bar
Basic Progress Bar
Deferred rendering, dynamic show/hide and built-in progress text:
<button id="btn1">Show</button>
Additional Options
Rendered on page load, left-aligned text and % width:
<button id="btn2">Show</button>
Waiting Bar
Wait for a long operation to complete (example will stop after 5 secs):
<button id="btn3">Show</button>
Ready
Custom Styles
Rendered like Windows XP with custom progress text element:
<button id="btn4">Show</button>
</body> </html>
</source>
Use the ProgressBar class.
<source lang="html4strict">
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
// Progress bar 1 var pbar1 = new Ext.ProgressBar({ text:"Initializing..." }); var btn1 = Ext.get("btn1"); btn1.on("click", function(){ Ext.fly("p1text").update("Working"); if (!pbar1.rendered){ pbar1.render("p1"); }else{ pbar1.text = "Initializing..."; pbar1.show(); } Runner.run(pbar1, Ext.get("btn1"), 10, function(){ pbar1.reset(true); Ext.fly("p1text").update("Done.").show(); }); }); // Progress bar 2 var pbar2 = new Ext.ProgressBar({ text:"Ready", id:"pbar2", cls:"left-align", renderTo:"p2" }); var btn2 = Ext.get("btn2"); btn2.on("click", function(){ Runner.run(pbar2, btn2, 12, function(){ pbar2.reset(); pbar2.updateText("Done."); }); }); // Progress bar 3 var pbar3 = new Ext.ProgressBar({ id:"pbar3", width:300, renderTo:"p3" }); pbar3.on("update", function(val){ //You can handle this event at each progress interval if //needed to perform some other action Ext.fly("p3text").dom.innerHTML += "."; }); var btn3 = Ext.get("btn3"); btn3.on("click", function(){ Ext.fly("p3text").update("Working"); btn3.dom.disabled = true; pbar3.wait({ interval:200, duration:5000, increment:15, fn:function(){ btn3.dom.disabled = false; Ext.fly("p3text").update("Done"); } }); }); // Progress bar 4 var pbar4 = new Ext.ProgressBar({ text:"Waiting on you...", id:"pbar4", textEl:"p4text", cls:"custom", renderTo:"p4" }); var btn4 = Ext.get("btn4"); btn4.on("click", function(){ Runner.run(pbar4, btn4, 19, function(){ pbar4.updateText("All finished!"); }); });
}); //Please do not use the following code as a best practice! :) var Runner = function(){
var f = function(v, pbar, btn, count, cb){ return function(){ if(v > count){ btn.dom.disabled = false; cb(); }else{ if(pbar.id=="pbar4"){ //give this one a different count style for fun var i = v/count; pbar.updateProgress(i, Math.round(100*i)+"% completed..."); }else{ pbar.updateProgress(v/count, "Loading item " + v + " of "+count+"..."); } } }; }; return { run : function(pbar, btn, count, cb){ btn.dom.disabled = true; var ms = 5000/count; for(var i = 1; i < (count+2); i++){ setTimeout(f(i, pbar, btn, count, cb), i*ms); } } }
}(); </script> </head> <body>
Progress Bar
Basic Progress Bar
Deferred rendering, dynamic show/hide and built-in progress text:
<button id="btn1">Show</button>
Additional Options
Rendered on page load, left-aligned text and % width:
<button id="btn2">Show</button>
Waiting Bar
Wait for a long operation to complete (example will stop after 5 secs):
<button id="btn3">Show</button>
Ready
Custom Styles
Rendered like Windows XP with custom progress text element:
<button id="btn4">Show</button>
</body> </html>
</source>
Wait for a long operation to complete (example will stop after 5 secs)
<source lang="html4strict">
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
// Progress bar 1 var pbar1 = new Ext.ProgressBar({ text:"Initializing..." }); var btn1 = Ext.get("btn1"); btn1.on("click", function(){ Ext.fly("p1text").update("Working"); if (!pbar1.rendered){ pbar1.render("p1"); }else{ pbar1.text = "Initializing..."; pbar1.show(); } Runner.run(pbar1, Ext.get("btn1"), 10, function(){ pbar1.reset(true); Ext.fly("p1text").update("Done.").show(); }); }); // Progress bar 2 var pbar2 = new Ext.ProgressBar({ text:"Ready", id:"pbar2", cls:"left-align", renderTo:"p2" }); var btn2 = Ext.get("btn2"); btn2.on("click", function(){ Runner.run(pbar2, btn2, 12, function(){ pbar2.reset(); pbar2.updateText("Done."); }); }); // Progress bar 3 var pbar3 = new Ext.ProgressBar({ id:"pbar3", width:300, renderTo:"p3" }); pbar3.on("update", function(val){ //You can handle this event at each progress interval if //needed to perform some other action Ext.fly("p3text").dom.innerHTML += "."; }); var btn3 = Ext.get("btn3"); btn3.on("click", function(){ Ext.fly("p3text").update("Working"); btn3.dom.disabled = true; pbar3.wait({ interval:200, duration:5000, increment:15, fn:function(){ btn3.dom.disabled = false; Ext.fly("p3text").update("Done"); } }); }); // Progress bar 4 var pbar4 = new Ext.ProgressBar({ text:"Waiting on you...", id:"pbar4", textEl:"p4text", cls:"custom", renderTo:"p4" }); var btn4 = Ext.get("btn4"); btn4.on("click", function(){ Runner.run(pbar4, btn4, 19, function(){ pbar4.updateText("All finished!"); }); });
}); //Please do not use the following code as a best practice! :) var Runner = function(){
var f = function(v, pbar, btn, count, cb){ return function(){ if(v > count){ btn.dom.disabled = false; cb(); }else{ if(pbar.id=="pbar4"){ //give this one a different count style for fun var i = v/count; pbar.updateProgress(i, Math.round(100*i)+"% completed..."); }else{ pbar.updateProgress(v/count, "Loading item " + v + " of "+count+"..."); } } }; }; return { run : function(pbar, btn, count, cb){ btn.dom.disabled = true; var ms = 5000/count; for(var i = 1; i < (count+2); i++){ setTimeout(f(i, pbar, btn, count, cb), i*ms); } } }
}(); </script> </head> <body>
Progress Bar
Basic Progress Bar
Deferred rendering, dynamic show/hide and built-in progress text:
<button id="btn1">Show</button>
Additional Options
Rendered on page load, left-aligned text and % width:
<button id="btn2">Show</button>
Waiting Bar
Wait for a long operation to complete (example will stop after 5 secs):
<button id="btn3">Show</button>
Ready
Custom Styles
Rendered like Windows XP with custom progress text element:
<button id="btn4">Show</button>
</body> </html>
</source>