`
天涯海角tour
  • 浏览: 169864 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

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?














    

  1. Ext.MessageBox.show({  
    2. 

  2.   title:'请等待',  
    3. 

  3.   msg:'数据读取中……',  
    4. 

  4.   width:240,  
    5. 

  5.   progress:true,  
    6. 

  6.   closable:false  
    7. 

  7. });  
    8. 





 


 


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


 







[c-sharp] view plaincopyprint?














    

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





 


 


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


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


 







[c-sharp] view plaincopyprint?














    

  1. var f=function(v){  
    2. 

  2.     return function(){  
    3. 

  3.     if (v==11){  
    4. 

  4.     Ext.MessageBox.hide();  
    5. 

  5.        }else{  
    6. 

  6.        Ext.MessageBox.updateProgress(v/10,'正在读取第'+v+'个，一共10个。');  
    7. 

  7.        }  
    8. 

  8.     };  
    9. 

  9. };  
    10. 

  10. for(var i=1;i<12;i++)  
    11. 

  11. {  
    12. 

  12. setTimeout(f(i),i*1000);  
    13. 

  13. }  
    14. 





 


 


除了这种可以精确地控制进度的进度条，我们还可以使用一种可以自动控制变化的进度条提示框，这是需要使用：Ext.MessageBox.wait()。


 







[c-sharp] view plaincopyprint?














    

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





 


 


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


 


  
  

    
      
        
    
          
    • 
          
          
  • 大小: 10.5 KB
    • 
        

      
    
    
      
    
  




  

    
    
分享到：
      
      
    

  


  

    

      
      |
      闪回数据
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

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

      

  

  





  

    
相关推荐

    
    
  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics