Extjs教程-滚动条
Extjs教程，本文介绍一下Extjs的滚动条，效果看起来不错.Extjs分为手动模式进度条 和自动模式的
先看一下一个简单的代码以及效果。
代码如下（自动）：
Ext.onReady(function(){
Ext.Msg.wait('请稍等,操作需要时间!','提示内容',{text:'进度条文字显示'});
});
效果图如下：
图1
首先介绍一下进度表
Ext.ProgressBar 是个可以更新的进度条在手动模式下，可以进行显示更新和清除。在自动模式里面只能调用
wait方法，进度条无限制滚动下去。
首先介绍一下进度条
进度条的创建
var ProgressBar = new Ext.progressBar({
text：‘进度条显示内容’,
width:300 进度条的宽度,
renderTo:'进度条父级容器的ID'//也可以getElementByid（'ID'） 这里必须是容器不能是tr等
})
创建完毕后是Ext.progressBar对象
下面介绍手动解读条
调用格式
updateProgress([float value],[String text],[Boolean animate]);
value 显示进度的百分比 如果超过1 则重新开始
text 进度条显示的文字
animate 是否使用动画
举例创建一个手动的滚动条代码如下
Ext.onReady(function(){
var ProgressBar = new Ext.ProgressBar({
width:300,
renderTo:'someid'
});//上面创建滚动条完毕
var count= 0;//设置滚动条刷新的次数
var pecentage = 0;//设置滚动百分比初始为0
var progressText = 'this is default content';//设置滚动条要显示的内容
//上面设置的全局变量，下面开始定义开始执行内容
Ext.TaskManager.start({
run:function(){
count++;
if(count>10)ProgressBar.hide();
pecentage = count/10;
progressText =pecentage*100+ '%';
ProgressBar.updateProgress(pecentage,progressText,true);
},interval:1000,repeat:6//每一秒执行一次，并通过updatePregress更新到进度条显示
});
//上面设置了执行次数，执行间隔，执行，以及
});
//如果想试验上面代码一定要创建一个someid的容器。目前仅设置进度到60%
图2
下面介绍自动滚动条的调用格式以及参数说明
简单调用格式
Ext.Msg.wait(String msg,[String title],[Objectconfig]);
msg 是默认的提示内容
title 是显示进度条的标题
config 是相关参数设置，比如上面的参数为 text 为 进度条上显示的文字。
wait([Object config]);的详细参数设置，这里是自动格式的进度条
Config的配置说明
duration Number 设置显示的时间长度值单位毫秒，滚动条滚动时间
interval Number 设置滚动条更新时间状态 单位毫秒 比如1000ms 更新一下(滚动条滚动一下)
animate Boolean 是否使用动画效果
increment Number 将进度条设置为多少分段 比如10 那么，滚动条会变化十次来完成整个滚动效果原载于:ｆｏｒａｓｐ．ｃｎ
超过10次则回到开始位置
text String 显示进度条上的文字 默认为空
fn function 回调函数，当时间进度完毕时调用，如果duraction不存在则回调函数被忽略
scope object 回调函数执行范围。
举例自动模式
Ext.onReady(function(){
var ProgressBar = new Ext.ProgressBar({
width:300,
renderTo:'someid'
});//上面创建滚动条完毕
var count= 0;//设置滚动条刷新的次数
var pecentage = 0;//设置滚动百分比初始为0
var progressText = 'this is default content';//设置滚动条要显示的内容
//上面设置的全局变量，下面开始定义开始执行内容
ProgressBar.wait({
duration:10000,//共10秒
interval:1000,//每秒1段
increment:10//分十段
});
//上面设置了执行次数，执行间隔，执行，以及
});
跟简单的模式基本相似。
