使用进度条的例子：
<%@ 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>
分享到：
相关推荐
3. **Extjs4.0**：Extjs是一个用于构建Web应用的前端JavaScript库，特别适合创建复杂的用户界面。4.0版本提供了一系列组件和布局管理，使得开发者能快速构建出美观且功能丰富的界面。 4. **后台管理系统**：这类...
三、《Extjs4.0学习指南(中文).docx》 这是一份全面的学习指南，系统地介绍了ExtJS4.0的基础概念和API。从基础的组件使用，如按钮、表格、面板，到高级特性，如数据网格、图表、树形结构，都有深入的讲解。同时，该...
EXTJS 4.0 是一个强大的JavaScript框架，用于构建富客户端Web应用程序。...通过分析这些文件，我们可以学习如何在实际项目中实施EXTJS 4.0的MVC模式，理解其工作原理，并掌握如何组织和构建一个EXTJS应用程序。
开发者可以通过此项目学习到如何使用Struts2 Action返回JSON数据，ExtJS Grid如何解析并显示这些数据，以及Spring如何管理整个应用的生命周期。这样的组合既提供了强大的后台处理能力，也具备优秀的用户体验，是现代...
Ext JS 4.0的文档详细记录了每个组件和类的用法，适合不同水平的开发者。官方也提供了一些教程来帮助新手快速入门。 8. **事件管理** Ext JS 4.0拥有自己的事件管理器，允许开发者通过声明的方式来处理事件，而非...
【标题】"Extjs4.0+java的一个后台管理项目" 涉及的主要知识点包括前端框架ExtJS 4.0、后端开发语言Java以及数据库管理系统SQL Server，特别是日志管理功能的实现。 **ExtJS 4.0** 是Sencha公司推出的一款基于...
【标题】"extjs4.0图书馆管理子系统"是一个基于Web的应用程序，它利用了先进的前端技术EXTJS4.0来构建用户界面，提供高效、直观的图书管理功能。EXTJS是一个强大的JavaScript库，专为创建桌面级的富互联网应用程序...
### ExtJS 4.0 技术中文视频知识点解析 ...这些视频涵盖了 ExtJS 4.0 的各个方面，从基础概念到高级功能均有涉及，适合不同程度的学习者观看。希望这些知识点能帮助大家更好地理解和掌握 ExtJS 4.0 的使用技巧。
总之，"Extjs4.0+struts2简单MVC 实例demo"是一个很好的学习资源，涵盖了两种关键技术的整合和MVC模式的应用，对于提升Java Web开发技能非常有帮助。通过深入研究这个示例，开发者可以更好地掌握Web应用的开发流程，...
根据提供的文件信息，本文将对“javassm源码Extjs4.0通用后台管理系统源码”进行深入解析，重点围绕其技术特点、应用场景及扩展性等方面展开。 ### javassm框架简介 #### JavaSSM JavaSSM是指基于Java语言开发的...
ExtJS 是一个强大的JavaScript 库，专用于构建富客户端Web应用程序。...学习和理解这些示例，将有助于提升你使用ExtJS开发富客户端应用的能力。如果你正在使用或计划使用ExtJS，那么深入研究这些功能是非常有价值的。
其中，`jsb3`文件是一种特定格式的文件，通常用于记录和管理ExtJS项目的类依赖关系，帮助开发者更好地理解和组织代码结构。 Spket是一款强大的JavaScript集成开发环境（IDE），专为JavaScript、Ajax和MVC框架如...
通过这个【标题】和【描述】，我们可以学习到如何利用SSH框架进行后端开发，以及EXTJS 4.0进行前端UI设计。对于想深入理解这些技术或需要开发类似系统的开发者来说，这是一个宝贵的实践资源。【标签】"ext例子"表明...
### ext4.0 学习总结及使用说明 #### 一、引言 随着技术的发展，文件系统的更新迭代显得尤为重要。Linux操作系统中的ext4作为ext3的继任者，不仅继承了其诸多优点，还引入了一系列重要的改进措施，极大地提升了...
《假期管理ext4.0项目：整合EXTJS4、SSH与MySQL的实践探索》 本文将深入探讨一个基于EXTJS4、SSH（Spring、Struts2、Hibernate）和MySQL数据库的假期管理系统，该项目旨在为小型企业提供高效且易用的假期管理解决...
这个项目提供的源代码（第18讲源代码）可能涵盖部分或全部上述模块，为学习者提供了一次实际操作的机会，了解如何将ASP.NET和ExtJS技术结合应用于实际项目。通过深入研究这些代码，开发者可以提升在.NET和JavaScript...
EXTJS文档则是关于EXT JavaScript库的相关资料，它是一个用于构建桌面级Web应用的富客户端框架，与EXT4文件系统本身并无直接关联，但可能在构建基于EXT4的管理界面时有所帮助。 总之，EXT4.0中文文档是理解、管理和...
原始代码可能是基于EXTJS 4.0版本的，作者通过个人的努力使其兼容了4.2版本，并且还提供了一个修改引用地址的示例，这对于那些需要在不同环境中部署应用的开发者来说是非常有价值的。 在EXTJS中实现数据导出到Excel...
"ExtJS 2.0.chm"则可能包含了EXT JS 2.0的详细文档，帮助开发者深入学习和使用这个JavaScript库。 总结来说，EXT2.0和EXT4.0是Linux系统中的两种文件系统，JavaScript是一种关键的Web编程语言，EXT JS是一个基于...
结合Extjs4.0作为客户端界面，能够创建丰富的用户体验和交互效果。 该系统设计包括六个主要功能模块：用户系统管理、客服中心管理、配送管理、库房管理、调度管理和车辆信息管理。用户系统管理模块涉及用户注册、...