progress-bar.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:3k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.onReady(function(){
  2.     //==== Progress bar 1 ====
  3.     var pbar1 = new Ext.ProgressBar({
  4.        text:'Initializing...'
  5.     });
  6.     var btn1 = Ext.get('btn1');
  7.     btn1.on('click', function(){
  8.         Ext.fly('p1text').update('Working');
  9.         if (!pbar1.rendered){
  10.             pbar1.render('p1');
  11.         }else{
  12.             pbar1.text = 'Initializing...';
  13.             pbar1.show();
  14.         }
  15.         Runner.run(pbar1, Ext.get('btn1'), 10, function(){
  16.             pbar1.reset(true);
  17.             Ext.fly('p1text').update('Done.').show();
  18.         });
  19.     });
  20.     //==== Progress bar 2 ====
  21.     var pbar2 = new Ext.ProgressBar({
  22.         text:'Ready',
  23.         id:'pbar2',
  24.         cls:'left-align',
  25.         renderTo:'p2'
  26.     });
  27.     var btn2 = Ext.get('btn2');
  28.     btn2.on('click', function(){
  29.         Runner.run(pbar2, btn2, 12, function(){
  30.             pbar2.reset();
  31.             pbar2.updateText('Done.');
  32.         });
  33.     });
  34.     //==== Progress bar 3 ====
  35.     var pbar3 = new Ext.ProgressBar({
  36.         id:'pbar3',
  37.         width:300,
  38.         renderTo:'p3'
  39.     });
  40.     pbar3.on('update', function(val){
  41.         //You can handle this event at each progress interval if
  42.         //needed to perform some other action
  43.         Ext.fly('p3text').dom.innerHTML += '.';
  44.     });
  45.     var btn3 = Ext.get('btn3');
  46.     btn3.on('click', function(){
  47.         Ext.fly('p3text').update('Working');
  48.         btn3.dom.disabled = true;
  49.         pbar3.wait({
  50.             interval:200,
  51.             duration:5000,
  52.             increment:15,
  53.             fn:function(){
  54.                 btn3.dom.disabled = false;
  55.                 Ext.fly('p3text').update('Done');
  56.             }
  57.         });
  58.     });
  59.     //==== Progress bar 4 ====
  60.     var pbar4 = new Ext.ProgressBar({
  61.         text:'Waiting on you...',
  62.         id:'pbar4',
  63.         textEl:'p4text',
  64.         cls:'custom',
  65.         renderTo:'p4'
  66.     });
  67.     var btn4 = Ext.get('btn4');
  68.     btn4.on('click', function(){
  69.         Runner.run(pbar4, btn4, 19, function(){
  70.             pbar4.updateText('All finished!');
  71.         });
  72.     });
  73. });
  74. //Please do not use the following code as a best practice! :)
  75. var Runner = function(){
  76.     var f = function(v, pbar, btn, count, cb){
  77.         return function(){
  78.             if(v > count){
  79.                 btn.dom.disabled = false;
  80.                 cb();
  81.             }else{
  82.                 if(pbar.id=='pbar4'){
  83.                     //give this one a different count style for fun
  84.                     var i = v/count;
  85.                     pbar.updateProgress(i, Math.round(100*i)+'% completed...');
  86.                 }else{
  87.                     pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');
  88.                 }
  89.             }
  90.        };
  91.     };
  92.     return {
  93.         run : function(pbar, btn, count, cb){
  94.             btn.dom.disabled = true;
  95.             var ms = 5000/count;
  96.             for(var i = 1; i < (count+2); i++){
  97.                setTimeout(f(i, pbar, btn, count, cb), i*ms);
  98.             }
  99.         }
  100.     }
  101. }();