来个图片
<!-- 页面加载时弹出一个进度条,10秒后自动关闭 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'listener.jsp' starting page</title>
<!-- 需要引入的ext对象 -->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
});
function dd()
{
var msgBox = Ext.MessageBox.show({
title:'提示',
msg:'动态更新的进度条和信息文字',
modal:true,
width:300,
progress:true
})
var count = 0;//滚动条被刷新的次数
var percentage = 0;//进度百分比
var progressText = '';//进度条信息
Ext.TaskMgr.start({
run:function(){
count++; //刷新10次后关闭信息提示对话框
if(count > 10){
count = 0;
//msgBox.hide();
}
//计算进度
percentage = count/10;
//生成进度条文字
progressText = percentage*100 + "%";
//更新信息提示对话框
msgBox.updateProgress(percentage,progressText,
'当前时间:'+new Date().format('Y-m-d g:i:s A'));
},
interval:1000
});
}
</script>
</head>
<body>
<button οnclick="dd();">click</button>
</body>
</html>
1:下面来自转载
http://blog.csdn.net/wangdingbang/article/details/6281331
来个图片
进度条经常应用到需要用户等待某一操作完成的场景。在执行一些比较耗时的操作时,我们需要用它来提示用户耐心等待。Ext.MessageBox为我们提供了默认的进度条,只要将progress参数设为true,对话框中就会出现进度条,如下面的代码所示:
- Ext.MessageBox.show({
- title:'请等待',
- msg:'数据读取中……',
- width:240,
- progress:true,
- closable:false
- });
也可以使用Ext.MessageBox提供的progress函数,如下面的代码所示:
- Ext.MessageBox.progress('请等待',msg:'读取数据中……');
我们已经得到了进度条,但是他的状态不会发生变化(自动向前推进),我们需要调用Ext.MessageBox.update-Progress()函数让进度条状态发生变化。通常我们还会使用closable:false来隐藏右上角的关闭按钮,从而禁止用户关掉进度条。
现在,为上边的例子添加更新进度条的功能,我们使用timeout定时器对进度条进行修改,进度条的状态会随时间而变化,10秒以后进度条对话框将会隐藏,代码如下边所示:
- var f=function(v){
- return function(){
- if (v==11){
- Ext.MessageBox.hide();
- }else{
- Ext.MessageBox.updateProgress(v/10,'正在读取第'+v+'个,一共10个。');
- }
- };
- };
- for(var i=1;i<12;i++)
- {
- setTimeout(f(i),i*1000);
- }
除了这种可以精确地控制进度的进度条,我们还可以使用一种可以自动控制变化的进度条提示框,这是需要使用:Ext.MessageBox.wait()。
- Ext.MessageBox.wait('请等待',msg:'数据读取中……');
这是弹出的对话框的进度条就会自动的向前推进了,不过我们无法对进度条的值进行精确地控制,如果等待的时间过长,进度条满格之后又会从零开始向前推进。根据具体情况选择使用Ext.MessageBox.progress()或 Ext.MessageBox.wait()。