一、手动模式加载进度条:
<HTML>
<HEAD>
<TITLE>使用EXT输出HelloWorld</TITLE>
<!-- 导入extjs配置 … ... -->
<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./../ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
/**
updateProgress(Float value,String text)
value:0——1之间的数字默认为0
progressText:进度条上显示的文字
text:显示的内容
*/
var progressBar = new Ext.ProgressBar({
text: 'working...',
width: 300,
applyTo: 'progressBar'
});
var count = 0;//滚动条被刷新的次数
var percentage = 0;//进度百分比
var progressText = "";//进度条信息
Ext.TaskMgr.start({
run:function(){
count++;
if(count > 10){
progressBar.hide();
}
//计算进度
percentage = count/10;
//生成进度条文字
progressText = percentage*100+"%";
//更新信息提示对话框
progressBar.updateProgress(percentage,progressText);
},
interval:1000
});
});
</script>
</HEAD>
<body>
<div id="progressBar"></div>
</body>
</HTML>
二、自定义模式加载进度条
<HTML>
<HEAD>
<TITLE>使用EXT输出HelloWorld</TITLE>
<!-- 导入extjs配置 … ... -->
<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./../ext/ext-all.js"></script>
<style type="text/css">
.custom .x-progress-inner{
height: 17px;
background: #fff;
}
.custom .x-progress-bar{
height: 15px;
background: transparent url(../extjs002/default_pic.gif) repeat-x 0 0;
border-top: 1px solid #BEBEBE;
border-bottom: 1px solid #BFBFBF;
border-right: 0;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
var progressBar = new Ext.ProgressBar({
text: 'work...',
width:300,
applyTo: 'progressBar',
cls: 'custom'
});
progressBar.wait({
duration: 10000, //进度条持续更新10秒
interval: 1000, //每一秒更新一次
increment: 10 //进度条分10次更新完毕
});
});
</script>
</HEAD>
<body>
<div id="progressBar"></div>
</body>
</HTML>
三、自动模式加载进度条
<HTML>
<HEAD>
<TITLE>使用EXT输出HelloWorld</TITLE>
<!-- 导入extjs配置 … ... -->
<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./../ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
/*
wait(Object config)
config是一个自动更新进度条的配置项,它提供了非常有用的配置供我们使用
参数如下:
duration:设定进度条在被重置之前要运行的时间长度,单位是毫秒,如果忽略该项则进度条会持续更新知道调用reset方法
interval:更新进度条的时间间隔,单位是毫秒默认值为1000毫秒
fn:再进度条更新完毕后被调用,该回调函数没有参数当duration配置项不存在时回调函数被忽略
scope:回调函数的执行范围
*/
var progressBar = new Ext.ProgressBar({
text: 'work...',
width:300,
applyTo: 'progressBar'
});
progressBar.wait({
duration: 10000, //进度条持续更新10秒
interval: 1000, //每一秒更新一次
increment: 10, //进度条分10次更新完毕
scope: this, //回调函数执行的范围
fn:function(){ //更新完后调用的回调函数
alert("更新完毕");
}
});
});
</script>
</HEAD>
<body>
<div id="progressBar"></div>
</body>
</HTML>