记录:extjs4.0学习3使用进度条的例子:%@ page languagejava contentTypetext/html charsetUTF-8p
记录:extjs4.0学习3
使用进度条的例子:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/script/ext4.0/resources/css/ext-all.css" /><script type = "text/javascript" src="<%=request.getContextPath()%>/script/ext4.0/ext-all.js" ></script><script type = "text/javascript" src="<%=request.getContextPath()%>/script/ext4.0/locale/ext-lang-zh_CN.js"> </script><title>Ext Progres Bar测试</title><script type="text/javascript">Ext.onReady(function(){var progressBar = new Ext.ProgressBar({text:'进度1',width:300,renderTo:'progressbar1'});var progressBar2 = new Ext.ProgressBar({text:'进度2',width:300,renderTo:'progressbar2'});var progressBar3 = new Ext.ProgressBar({text:'进度3',width:500,renderTo:'progressbar3'});var count = 0;var count2 = 0;var percentage = 0;var percentage2 = 0;var progressText = "";var progressText2 = "";var task = {run: function(){count=count+Math.round((Math.random()*10));count2=count2+Math.round((Math.random()*10));if(count2>100) count2 = 100;if(count>100) count = 100;if(count>=100){//progressBar.hide();count=100;Ext.TaskManager.stop(task);}else if(count2>=100){//progressBar.hide();count2=100;Ext.TaskManager.stop(task);}percentage = count/100;progressText = count+'%';progressBar.updateProgress(percentage,progressText,true);percentage2 = count2/100;progressText2 = count2+'%';progressBar2.updateProgress(percentage2,progressText2,true);},interval:1000};Ext.TaskManager.start(task);//进度条自动增长模式progressBar3.wait({duration: 20*1000,//进度条运行时间interval: 500,//更新进度条的间隔animate: true,//是否启用动画increment: 12,//进度条的分段次数text:'任务进行中...',//进度条里面显示的文字scope: this,//回调函数的执行范围fn: function(){Ext.Msg.alert("提示","任务完成!");}});});</script></head><body><div id="progressbar1">定位在div上面的进度条</div><br><table border='1'><tr><td>1</td><td>2</td></tr><tr><td>定位在td上面的进度条</td><td id = "progressbar2"></td></tr></table><br><div id="progressbar3">自动模式进度条</div></body></html>? 