Extjs_ProgressBar学习

1:手动模式进度条

<script>
        Ext.onReady(function () {
            var p = new Ext.ProgressBar({
                text: '我是进度条',
                width: 300,
                renderTo: 'id1' //指定下面id为id1的DIV

            });

            var count = 0;
            var percentage = 0;
            var processText = '';
            Ext.TaskManager.start({
                run: function () {
                    count++;
                    if (count > 10) {
                        p.hide();
                    }
                    percentage = count / 10;
                    processText = percentage * 100 + "%";
                    p.updateProgress(percentage,processText,true);
                },
                interval: 1000,
                repeat:16
            });
        });
    </script>

View Code

 

2:自动模式进度条

      不能准确地反映程序的执行状态，而是给用户一个友好的提示，通常只需调用wait()

 Ext.onReady(function () {
            var pb = new Ext.ProgressBar({
                text: '进行中。。。',
                width: 300,
                //applyTo: 'id1'
                renderTo: 'id1'//书上写的是applyTo,但是用了没有反应。。。
            });
            pb.wait({
                duration: 10000,  //持续的时间啦
                interval: 1000,   //多少间隔执行一次
                increment: 10,    //分多少次执行完
                text: '骚等...',
                scope: this,　　　　//回调函数的执行范围，这个东西我也不太理解
                fn: function () {
                    alert('a');
                }
            });
        });

View Code

3:自定义样式进度条,只要你样式写的好，完全可以把进度条从吊丝变成高福帅...但是作为吊丝的我，样式一直不太好。所以进度条也注定吊丝了。进猪则亦，近墨者黑啊。。

<style>
        .custom .x-progress-inner {
            height:17px; 
            background:#0094ff;
        }
        .custom .x-progress-bar {
            height:15px;
            background:transparent url(images/custom-bar-red.gif) repeat-x 0 0;
            border-top:1px solid #ff0000;
            border-bottom:1px solid #ffd800;
            border-right:0;
        }
    </style>
 Ext.onReady(function () {
            var pbar2 = new Ext.ProgressBar({
                width: 300,
                renderTo: 'id1',
                cls:'custom'
            });
            pbar2.wait({
                duration: 10000,
                interval: 1000,
                increment:10
            });
        });

View Code

 

转载于:https://www.cnblogs.com/jessetang/p/3392826.html