JavaScript DHTML/Ext JS/ProgressBar
Содержание
ProgressBar: Rendered on page load, left-aligned text and % width
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<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>
<h1>Progress Bar</h1>
<p>
<b>Basic Progress Bar</b><br />
Deferred rendering, dynamic show/hide and built-in progress text:
<button id="btn1">Show</button><br />
<div class="status" id="p1text">Nothing to see here.</div>
<div id="p1" style="width:300px;"></div>
</p>
<p>
<b>Additional Options</b><br />
Rendered on page load, left-aligned text and % width:
<button id="btn2">Show</button><br />
<div id="p2" style="width:50%;"></div>
</p>
<p>
<b>Waiting Bar</b><br />
Wait for a long operation to complete (example will stop after 5 secs):
<button id="btn3">Show</button><br />
<div id="p3"></div>
<span class="status" id="p3text">Ready</span>
</p>
<p>
<b>Custom Styles</b><br />
Rendered like Windows XP with custom progress text element:
<button id="btn4">Show</button><br />
<div id="p4" style="width:300px;"></div>
<div class="status"><b>Status:</b> <span id="p4text"></span></div>
</p>
</body>
</html>
Rendered like Windows XP with custom progress text element
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<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>
<h1>Progress Bar</h1>
<p>
<b>Basic Progress Bar</b><br />
Deferred rendering, dynamic show/hide and built-in progress text:
<button id="btn1">Show</button><br />
<div class="status" id="p1text">Nothing to see here.</div>
<div id="p1" style="width:300px;"></div>
</p>
<p>
<b>Additional Options</b><br />
Rendered on page load, left-aligned text and % width:
<button id="btn2">Show</button><br />
<div id="p2" style="width:50%;"></div>
</p>
<p>
<b>Waiting Bar</b><br />
Wait for a long operation to complete (example will stop after 5 secs):
<button id="btn3">Show</button><br />
<div id="p3"></div>
<span class="status" id="p3text">Ready</span>
</p>
<p>
<b>Custom Styles</b><br />
Rendered like Windows XP with custom progress text element:
<button id="btn4">Show</button><br />
<div id="p4" style="width:300px;"></div>
<div class="status"><b>Status:</b> <span id="p4text"></span></div>
</p>
</body>
</html>
Use the ProgressBar class.
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<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>
<h1>Progress Bar</h1>
<p>
<b>Basic Progress Bar</b><br />
Deferred rendering, dynamic show/hide and built-in progress text:
<button id="btn1">Show</button><br />
<div class="status" id="p1text">Nothing to see here.</div>
<div id="p1" style="width:300px;"></div>
</p>
<p>
<b>Additional Options</b><br />
Rendered on page load, left-aligned text and % width:
<button id="btn2">Show</button><br />
<div id="p2" style="width:50%;"></div>
</p>
<p>
<b>Waiting Bar</b><br />
Wait for a long operation to complete (example will stop after 5 secs):
<button id="btn3">Show</button><br />
<div id="p3"></div>
<span class="status" id="p3text">Ready</span>
</p>
<p>
<b>Custom Styles</b><br />
Rendered like Windows XP with custom progress text element:
<button id="btn4">Show</button><br />
<div id="p4" style="width:300px;"></div>
<div class="status"><b>Status:</b> <span id="p4text"></span></div>
</p>
</body>
</html>
Wait for a long operation to complete (example will stop after 5 secs)
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<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>
<h1>Progress Bar</h1>
<p>
<b>Basic Progress Bar</b><br />
Deferred rendering, dynamic show/hide and built-in progress text:
<button id="btn1">Show</button><br />
<div class="status" id="p1text">Nothing to see here.</div>
<div id="p1" style="width:300px;"></div>
</p>
<p>
<b>Additional Options</b><br />
Rendered on page load, left-aligned text and % width:
<button id="btn2">Show</button><br />
<div id="p2" style="width:50%;"></div>
</p>
<p>
<b>Waiting Bar</b><br />
Wait for a long operation to complete (example will stop after 5 secs):
<button id="btn3">Show</button><br />
<div id="p3"></div>
<span class="status" id="p3text">Ready</span>
</p>
<p>
<b>Custom Styles</b><br />
Rendered like Windows XP with custom progress text element:
<button id="btn4">Show</button><br />
<div id="p4" style="width:300px;"></div>
<div class="status"><b>Status:</b> <span id="p4text"></span></div>
</p>
</body>
</html>