Extjs 进度条实例

本文提供两个ExtJS进度条的实例,通过按钮控制进度条的启动与停止,实例包括了基本的进度条配置和使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>ExtJs 进度条实例 </title>
  <link rel="stylesheet" type="text/css" href="ext-all.css">
  <script type="text/javascript" src="ext-base.js"></script>
  <script type="text/javascript" src="ext-all.js"></script>
  <script type="text/javascript" src="ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
  //*****************进度条实例1*********************//
   
   var pbar1; //定义一个变量用于进度条对象
   var btn1; //定义一个变量用于进按钮对象
   
   Ext.onReady(function(){
    pbar1=new Ext.ProgressBar({ //实例化进度条
     renderTo:"div1",  //进度条呈现的一个DIV
     width:800,    //进度条的宽度
     text:"单击按钮开始..." //在进度条里的初始文本
    });
    
    btn1=Ext.get("btn1");  //按钮对象
    btn1.on("click",f1);  //按钮事件,单击时调用f1()函数
   });
   var i=0; //初始化一个变量为0,下面会用到。
   function f1(){ 
     i++; //让i加1
     pbar1.updateProgress(i/100.0); //让进度条更新到指定的进度。这个值是0-1之间的数,我让i/100.0,以让它的结果是一个小数
     pbar1.updateText("进度:"+i+"%"); //进度条显示的文本     
     if(i==100){    //当i==100的时候让按钮状态可以使用,并让i=1,再让进度条停止  
      document.getElementById("btn1").disabled=false;
      i=0;
      clearInterval(x);
     }     
     document.getElementById("btn1").disabled=true; //让按钮的状态为不可用     
     setTimeout("f1()",50);//用setTimeout函数递归调用f1()函数,以达到进度条一直跑的效果
   }
   
            
   //***********进度条实例3**************//
   var pbar3;//定义一个变量用于进度条对象
   var btn3;//定义一个变量用于进按钮对象
   Ext.onReady(function(){
    pbar3 = new Ext.ProgressBar({ //实例化进度条
     renderTo:"div3",  //进度条呈现的一个DIV
     width:300,    //进度条的宽度
     text:"单击按钮开始..." //在进度条里的初始文本
    });
    
    btn3=Ext.get("btn3");    //按钮对象
    btn3.on("click",function(){  //按钮单击事件
     btn3.dom.disabled=true;   //把按钮设置为不可用状态
     pbar3.updateText("正在更新..."); //更新进度条的文本信息
     pbar3.wait({     //开始执行进度条
      interval:100,    //每次进度的时间间隔
      duration:5000,    //进度条跑动的持续时间
      increment:50,    //进度条的增量,这个值设的越大,进度条跑的越慢,不能小于1,如果小于1,进度条会跑出范围
      fn:function(){    //进度条完成时执行的函数,也可设为nulll
       btn3.dom.disabled=false;//把按钮设置为可用状态
       pbar3.updateText("更新完成..单击按钮重新开始...");//更新进度条的文本信息
      }
     });
    });
   });    
  </script>
 </head>
 <body>
  <center><h1>ExtJs 进度条实例</h1></center>
  <b>实例1</b>
  <br>
  <input type="button" id="btn1" value="开始">
  <div id="div1"></div>    
  <b>实例3</b>
  <br>
  <input type="button" id="btn3" value="开始">
  <div id="div3"></div> 
  
 </body>  
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值