進度條組件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次更新完畢
    });
    
});

CSS樣式表

<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>