ExtJS 初步應用 ProgressBar
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>MyAjax1.jsp</title>
<link rel="stylesheet" type="text/css" href=“ext-2.3.0/resources/css/ext-all.css" />
<script type="text/javascript" src=“ext-2.3.0/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src=“ext-2.3.0/ext-all.js">
</script>
</head>
<body>
<script type="text/javascript">
function myProgressBar(){
//变量的使用方式 var ProgressBar=new Ext.ProgressBar({});
var myProgressBar = new Ext.ProgressBar({
text: 'working...',
width: 300,
applyTo: 'progressBar'
});
configureMyprogressBar(myProgressBar);//将刚刚声明的对象传过去。。
}
//配置我的myProgressBar
function configureMyprogressBar(myProgressBar){
var count=0;
var percentage=0;
var progressText='';
Ext.TaskMgr.start({
run:function(){
count++;
if(count>10){
myProgressBar.hide();
}
percentage=count/10;
progressText=count*10+'%';
/*
* updateProgress(value,text)
* value应该是0～1之间的数字 若超过1 进度条不会开始
* text是进度条上显示的文字
**/
myProgressBar.updateProgress(percentage,progressText);
},
interval:1000
});
}
Ext.onReady(function(){
myProgressBar();
});
</script>
<div id='progressBar'></div>
</body>
</html>
