JavaScript DHTML/Ext JS/ProgressBar

Материал из Web эксперт
Перейти к: навигация, поиск

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>

Nothing to see here.

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>

Status:

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

Nothing to see here.

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>

Status:

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

Nothing to see here.

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>

Status:

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

Nothing to see here.

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>

Status:

</body> </html>


 </source>