extjs 弹出进度条

天涯海角tour

浏览: 173962 次
性别:
来自: 郑州

最近访客更多访客>>

songzhihuis

u010821061

天空与月亮

15071278032

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端
extjs 弹出进度条

来个图片

<!-- 页面加载时弹出一个进度条，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  onclick="dd();">click</button>
</body> 
</html>

1：下面来自转载

http://blog.csdn.net/wangdingbang/article/details/6281331

来个图片

进度条经常应用到需要用户等待某一操作完成的场景。在执行一些比较耗时的操作时，我们需要用它来提示用户耐心等待。Ext.MessageBox为我们提供了默认的进度条，只要将progress参数设为true，对话框中就会出现进度条，如下面的代码所示：

[c-sharp] view plaincopyprint?





Ext.MessageBox.show({  
  title:'请等待',  
  msg:'数据读取中……',  
  width:240,  
  progress:true,  
  closable:false  
});  

也可以使用Ext.MessageBox提供的progress函数，如下面的代码所示：

[c-sharp] view plaincopyprint?

Ext.MessageBox.progress('请等待',msg:'读取数据中……');

我们已经得到了进度条，但是他的状态不会发生变化（自动向前推进），我们需要调用Ext.MessageBox.update-Progress()函数让进度条状态发生变化。通常我们还会使用closable:false来隐藏右上角的关闭按钮，从而禁止用户关掉进度条。

现在，为上边的例子添加更新进度条的功能，我们使用timeout定时器对进度条进行修改，进度条的状态会随时间而变化，10秒以后进度条对话框将会隐藏，代码如下边所示：

[c-sharp] view plaincopyprint?





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()。

[c-sharp] view plaincopyprint?

Ext.MessageBox.wait('请等待',msg:'数据读取中……');

这是弹出的对话框的进度条就会自动的向前推进了，不过我们无法对进度条的值进行精确地控制，如果等待的时间过长，进度条满格之后又会从零开始向前推进。根据具体情况选择使用Ext.MessageBox.progress()或 Ext.MessageBox.wait()。

查看图片附件

分享到：

ibatis 列名无效 | 闪回数据

2012-04-27 15:00
浏览 1797
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论