如何使用进度条的插件来监控后台程序的运行进度?

蜡笔小新_ 发布于 2014/05/08 11:20
阅读 1K+
收藏 0

现在我有一个需求

简单的说比如,jquery前台发送一个ajax给后台,后台开始执行一些方法,但是执行的时间不是固定的,有时候长有时候短,我不能叫前台客户干等着啊,所以给客户一个进度条去监控后台的执行进度。

之前也接触过类似的需求,各位大哥大姐们给个建议和思路,或者有什么插件可以使用的

谢谢大家了!

加载中
0
人一定要靠自己

    Ext.MessageBox.show()中的进度条的使用
   首先必须知道例外两个方法 Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数,看名字就知道意思),
   注意value为0-1之间的数,表示进度条的进度.
   第一种:(通过进度的大小控制进度,满进度为1)

Extjs中进度条的应用 - ggmm21<a href='http://my.oschina.net/yinan' class='referer' target='_blank'>@126</a>  - 我的博客代码
 1 function Read4() {  2  var progressBar=Ext.Msg.show({  3  title:"标题",  4  msg:"通过进度的大小来控制进度",  5  progress:true,  6  width:300  7  });  8  var count=0;  9  var bartext=""; 10  var curnum=0; 11  Ext.TaskMgr.start({ 12  run:function () { 13  count++; 14  if (count>=10) { 15  progressBar.hide(); 16  } 17  curnum=count/10; 18  bartext=curnum*100+"%"; 19  progressBar.updateProgress(curnum,bartext); 20  }, 21  interval:1000 22  }) 23  }

第二种:(通过固定时间控制进度加载)

Extjs中进度条的应用 - ggmm21<a href='http://my.oschina.net/yinan' class='referer' target='_blank'>@126</a>  - 我的博客代码
 1 function Read5() {  2  var progressBar=Ext.Msg.show({  3  title:"标题",  4  msg:"通过固定时间完成进度",  5  width:300,  6  wait:true,  7  waitConfig:{interval:500,duration:5000,fn:function () {  8  Ext.Msg.hide();  9  }}, 10  closable:true 11  }); 12  // setTimeout(function () { 13  // Ext.Msg.hide(); 14  // },5000); 15   }

 

查看效果:

Extjs中进度条的应用 - ggmm21<a href='http://my.oschina.net/yinan' class='referer' target='_blank'>@126</a>  - 我的博客

Extjs中进度条的应用 - ggmm21<a href='http://my.oschina.net/yinan' class='referer' target='_blank'>@126</a>  - 我的博客动态更新进度信息

本课总结:

            实现进度条的方法有很多种:

            Ext.msg.wait(“内容”,“标题”,"json配置项显示内容"),{text:"正在加载中......"}

            Ext.msg.show(),其中此方法来实现进度条也有很多种表现方式:wait,progress设置为true都可以显示进度条

            实现动态加载进度条的方法:

            Ext.TaskMgr.start({
            run:function () {
                count++;
                if (count>=10) {
                    progressBar.hide();
                }
                curnum=count/10;
                bartext=curnum*100+"%";
                progressBar.updateProgress(curnum,bartext);
            },
            interval:1000
            })           

            setTimeout(fn,countTime)

            Ext.msg.show()中的waitconfig:{interval:500,duration:5000,fn:function{"加载完后触发方法"}}

本课代码:

 

Extjs中进度条的应用 - ggmm21<a href='http://my.oschina.net/yinan' class='referer' target='_blank'>@126</a>  - 我的博客代码
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext4.aspx.cs" Inherits="EXT1.Ext4" %>  2   3  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  4   5  <html xmlns="http://www.w3.org/1999/xhtml" >  6  <head runat="server">  7  <title>第四课,进度条的应用</title>  8  <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />  9  <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>  10  <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>  11 </head>  12 <body>  13  <form id="form1" runat="server">  14  <div id="id1">  15  <script type="text/javascript">  16  Ext.BLANK_IMAGE_URL="MyImage/dlg-bg.gif";  17  function Read1() {  18  Ext.Msg.wait("内容","Extjs进度条应用",{text:"正在加载。。。"});  19  }  20  function Read2() {  21  Ext.Msg.show({  22  modal:false,  23  title:"标题",  24  msg:"内容",  25  closable:true,  26  width:300,  27  wait:true  28  })  29  }  30  function Read3() {  31  Ext.Msg.show({  32  title:"标题",  33  msg:"内容",  34  modal:true,  35  closable:true,  36  width:300,  37  progress:true,  38  progressText:"保存进度"  39  })  40  }  41  function Read4() {  42  var progressBar=Ext.Msg.show({  43  title:"标题",  44  msg:"通过进度的大小来控制进度",  45  progress:true,  46  width:300  47  });  48  var count=0;  49  var bartext="";  50  var curnum=0;  51  Ext.TaskMgr.start({  52  run:function () {  53  count++;  54  if (count>=10) {  55  progressBar.hide();  56  }  57  curnum=count/10;  58  bartext=curnum*100+"%";  59  progressBar.updateProgress(curnum,bartext);  60  },  61  interval:1000  62  })  63  }  64  function Read5() {  65  var progressBar=Ext.Msg.show({  66  title:"标题",  67  msg:"通过固定时间完成进度",  68  width:300,  69  wait:true,  70  waitConfig:{interval:500,duration:5000,fn:function () {  71  Ext.Msg.hide();  72  }},  73  closable:true  74  });  75 // setTimeout(function () {  76 // Ext.Msg.hide();  77 // },5000);  78  }  79   80  function Read7() {  81  var msgbox=Ext.Msg.show({  82  title:"进度条应用",  83  msg:"提示内容",  84  closable:true,  85  width:300,  86  modal:true,  87  progress:true  88  });  89  var count=0;  90  var curnum=0;  91  var msgtext="";  92  Ext.TaskMgr.start({  93  run:function () {  94  count++;  95  if (count>10) {  96  msgbox.hide();  97  }  98  curnum=count/10;  99  msgtext="当前加载:"+curnum*100+"%"; 100  msgbox.updateProgress(curnum,msgtext,'当前时间:'+new Date().format('Y-m-d g:i:s A')); 101  }, 102  interval:1000 103  104  }) 105  106  } 107  function Read8() { 108  var progressBar=new Ext.ProgressBar({ 109  text:'working......', 110  width:300, 111  applyTo:id2 112  }); 113  var count=0; 114  var curnum=0; 115  var msgtext=""; 116  Ext.TaskMgr.start({ 117  run:function () { 118  count++; 119  if (count>10) { 120  progressBar.hide(); 121  } 122  curnum=count/10; 123  msgtext=curnum*100+"%"; 124  progressBar.updateProgress(curnum,msgtext); 125  }, 126  interval:1000 127  }) 128  } 129  function Read9() { 130  //自动模式进度条 131  var progressBar=new Ext.ProgressBar({ 132  text:'waiting......', 133  width:300, 134  applyTo:id2 135  }); 136  progressBar.wait({ 137  interval:1000, 138  duration:10000, 139  increment:10, 140  scope:this, 141  fn:function () { 142  alert("更新完毕"); 143  } 144  }); 145  } 146  function Read6() { 147  //字定义漂亮进度条 148  149  } 150  Ext.onReady(Read9); 151  </script> 152  </div> 153  <div id="id2"> 154  </div> 155  156  </form> 157 </body> 158 </html> 159

蜡笔小新_
蜡笔小新_
很详细,谢谢你的帮助!我学习了!
0
人一定要靠自己

flex 可以,

EXTjs也可以

人一定要靠自己
回复 @亚美碟 : 互相帮忙
人一定要靠自己
回复 @亚美碟 : 不用
蜡笔小新_
蜡笔小新_
谢谢你了
返回顶部
顶部