Ext中滚动条
最近看了一下Ext中的滚动条忽然发现其实是很简单就是使用ProgressBar对象
滚动条包括两种方式:1.手工模式2.自动模式(废话)
1.手动模式:我们只要使用ProgressBar.updateProgress([float value,String text]);方法就可以了
参数中 value 0-1之间 默认0 如果value大于1更新也不会停止
滚动条上现实的文字..如果忽视此参数..滚动条上的文字保持不变
2.自动模式:我们只需要使用wait([Object config])方法就可以实现了
config参数是一个滚动条配置参数
duration:滚动条在重置前运行的时间
interval:更新滚动条的时间间隔
increment:进度条分段数
fn:更新完成或执行的方法
scope回调函数执行范围
滚动条包括两种方式:1.手工模式2.自动模式(废话)
1.手动模式:我们只要使用ProgressBar.updateProgress([float value,String text]);方法就可以了
参数中 value 0-1之间 默认0 如果value大于1更新也不会停止
滚动条上现实的文字..如果忽视此参数..滚动条上的文字保持不变
<script type="text/javascript">
Ext.onReady(function(){
var ProgressBar = new Ext.ProgressBar({
width:300,//设定进度条的宽度
applyTo:'ProgressBar'
});
var count = 0;//滚动条被刷新的次数
var percentage = 0;//进度百分比
var progressText = '';//进度条信息
Ext.TaskMgr.start({
run:function(){
count++;
//刷新10次后关闭信息提示对话框
if(count > 10){
count=1;
}
//计算进度
percentage = count/10;
progressText = percentage * 100 + '%'
//更新信息提示对话框
ProgressBar.updateProgress(percentage,progressText);
},
interval:1000
});
});
</script>
</HEAD>
<BODY>
<table width=100%>
<tr><td> <td></tr>
<tr><td align='center'><div id='ProgressBar'></div><td></tr>
</table>
</BODY>
2.自动模式:我们只需要使用wait([Object config])方法就可以实现了
config参数是一个滚动条配置参数
duration:滚动条在重置前运行的时间
interval:更新滚动条的时间间隔
increment:进度条分段数
fn:更新完成或执行的方法
scope回调函数执行范围
<script type="text/javascript">
Ext.onReady(function(){
var ProgressBar = new Ext.ProgressBar({
text:'working.....',//进度条上显示的文字
width:300,//设定进度条的宽度
applyTo:'ProgressBar'
});
ProgressBar.wait({
duration:10000,//进度条持续更新10秒钟
interval:1000,//每1秒钟更新一次
increment:10,//进度条分10次更新完毕
scope:this,//回调函数的执行范围
fn:function(){//更新完成后调用的回调函数
alert('更新完毕');
}
});
});
</script>
</HEAD>
<BODY>
<table width=100%>
<tr><td> <td></tr>
<tr><td align='center'><div id='ProgressBar'></div><td></tr>
</table>
</BODY>