Extjs实现进度条的方法如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>extShowProgress.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="../ext1/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext1/ext-all.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="id1">
<script type="text/javascript">
/*1.使用MessageBox.wait()方法实现进度条*/
function Read1() {
Ext.Msg.wait("内容","Extjs进度条应用",{text:"正在加载。。。"});
}
/*2.使用MessageBox.show()方法中的配置参数wait:true，实现进度条*/
function Read2() {
Ext.Msg.show({
modal:false,
title:"标题",
msg:"内容",
closable:true,
width:300,
wait:true
})
}
/*3.使用MessageBox.show()方法中的配置参数progress:true,实现静态进度条*/
function Read3() {
Ext.Msg.show({
title:"标题",
msg:"内容",
modal:true,
closable:true,
width:300,
progress:true,
progressText:"保存进度"
})
}
function Read4() {
var progressBar=Ext.Msg.show({
title:"标题",
msg:"通过进度的大小来控制进度",
progress:true,
width:300
});
var count=0;
var bartext="";
var curnum=0;
Ext.TaskMgr.start({
run:function () {
count++;
if (count>=10) {
progressBar.hide();
}
curnum=count/10;
bartext=curnum*100+"%";
progressBar.updateProgress(curnum,bartext);
},
interval:1000
})
}
function Read5() {
var progressBar=Ext.Msg.show({
title:"标题",
msg:"通过固定时间完成进度",
width:300,
wait:true,
waitConfig:{interval:500,duration:4500,fn:function () {
Ext.Msg.hide();
}},
closable:true
});
}
function Read6() {
var msgbox=Ext.Msg.show({
title:"进度条应用",
msg:"提示内容",
closable:true,
width:300,
modal:true,
progress:true
});
var count=0;
var curnum=0;
var msgtext="";
Ext.TaskMgr.start({
run:function () {
count++;
if (count>10) {
msgbox.hide();
}
curnum=count/10;
msgtext="当前加载:"+curnum*100+"%";
msgbox.updateProgress(curnum,msgtext,'当前时间:'+new Date().format('Y-m-d g:i:s A'));
},
interval:1000
})
}
function Read7() {
var progressBar=new Ext.ProgressBar({
text:'working......',
width:300,
applyTo:id2
});
var count=0;
var curnum=0;
var msgtext="";
Ext.TaskMgr.start({
run:function () {
count++;
if (count>10) {
progressBar.hide();
}
curnum=count/10;
msgtext=curnum*100+"%";
progressBar.updateProgress(curnum,msgtext);
},
interval:1000
})
}
function Read8() {
//自动模式进度条
var progressBar=new Ext.ProgressBar({
text:'waiting......',
width:300,
applyTo:id2
});
progressBar.wait({
interval:1000,
duration:10000,
increment:10,
scope:this,
fn:function () {
alert("更新完毕");
}
});
}
Ext.onReady(Read8);
</script>
</div>
<div id="id2">
</div>
</form>
</body>
</html>
版权声明：本文为qq_45498460原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。