进度条组件Ext.ProgressBar

最新推荐文章于 2021-01-14 04:33:28 发布

转载最新推荐文章于 2021-01-14 04:33:28 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1773772/blog/609820

文章标签：

#python

本文介绍如何在ExtJS中使用进度条组件，并提供手动更新及自动更新进度条的示例代码。同时展示了如何通过CSS自定义进度条的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

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>