记录:extjs4.0学习3
2012-03-31 15:53
34 查看
使用进度条的例子:
<%@ 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>阅读更多
相关文章推荐
- ZigBee cc2530芯片学习 error记录(1)
- 大数据学习记录(day1)--云计算
- Linux学习记录--shell介绍
- java 学习记录4
- opencv小胡子——学习记录
- HTML学习记录3
- 新手安家--记录我的学习过程
- JVM类加载机制学习记录
- Oracle学习记录1(单行函数,多行函数)
- 记录一次Quartz2D学习(二)
- 2017.3.1 学习记录
- 【android 学习记录】socket客户端
- Material Design 学习记录
- XMPP学习记录三:关于连接服务器
- Swoole源码学习记录(六)——Pipe管道
- Oracle学习记录2(多表查询)
- Lucene3.6学习记录 索引的增删改查(二)
- iOS学习爬坑记录4:ios8中的搜索栏,使用UISearchController
- R语言学习记录-ggplot2练习-经济学人统计图临摹(2) -伪双坐标轴
- mysql 学习记录(二)--查询,权限,字段控制