进度条组件Ext.ProgressBar

Ext.onReady(function(){
//进度条组件Ext.ProgressBar
//2中模式:手动与自动

//手动
/*var progressBar = new Ext.ProgressBar({
width : 300,//宽度
renderTo : 'progressBar'
});

var count = 0; //滚动条刷新次数
var percentage = 0; //百分比
var progressText = ""; //进度条信息

Ext.TaskManager.start({
run : function(){
count++;
console.info(count);
//刷新10次后关闭对话框
if(count > 10){
progressBar.hide();
}
//计算进度
percentage = count/10;
progressText = percentage*100+"%";
//更新对话框提示
progressBar.updateProgress(percentage,progressText,true);
},
interval : 1000,//时间间隔
repeat : 6 //执行次数
});*/

//自动
var progressBarAuto = Ext.create('Ext.ProgressBar',{
//text : 'working......',
width : 300,
renderTo : 'progressBar'
});
progressBarAuto.wait({
duration : 10000,
interval : 1000,
increment : 10,
text : 'waiting......',
scope : this,
fn : function(){
console.info('更新完毕！');
}
});

//自定义样式进度更新
var progressBarAutoClass = Ext.create("Ext.ProgressBar",{
width: 300,
renderTo : 'progressBar',
cls : 'custom'
});
progressBarAutoClass.wait({
duration : 10000,//持续更新10秒钟
interval : 1000,//每秒更新一次
increment : 10 //进度条分10次更新完毕
});

});

<style>
.custom { border-radius:5px; }
.custom .x-progress-inner {
height: 17px;
background: #fff;
}
.custom .x-progress-bar {
height:17px;
background : -moz-repeating-linear-gradient(top left 45deg, #ace, #ace 5px, #f96 5px, #f96 15px);
border-right: 0;
}
</style>