extjs4中Ext.ProgressBar进度条控件实例

[html]
   

[Js]
    //加载进度条
    var progressBar1 = Ext.create("Ext.ProgressBar", {
        id: "progressBar1",
        text: '准备中...',
        renderTo: 'p1'
    });
    Ext.fly("button1").on('click', function () {
        //模拟加载环境
        var f = function (v) {
            return function () {
                var i = v / 12;
                progressBar1.updateProgress(i, '进度：' + v + '/12');
                if (v == 12) {
                    Ext.Msg.alert("提示", "加载完毕！");
                    progressBar1.reset();   //复位进度条
                    progressBar1.updateText("完成。");
                }
            };
        };
        for (var i = 1; i < 13; i++) {
            setTimeout(f(i), i * 200);
        }
    });

[html]
   

[Js]
    //等候进度条
    var pbar2 = Ext.create("Ext.ProgressBar", {
        id: "progressBar2",
        renderTo: 'p2',
        width: '150px'
    });
    pbar2.on('update', function (val) {
        //每次更新可以执行的动作
        Ext.fly('p2text').dom.innerHTML += '>';
    });
    Ext.fly("button2").on('click', function () {
        Ext.fly('p2text').update('正在启动windows2000：');
        pbar2.wait({
            interval: 200,             //每次更新的间隔周期
            duration: 5000,             //进度条运作时间的长度，单位是毫秒
            increment: 5,               //进度条每次更新的幅度大小,表示走完一轮要几次（默认为10）。
            fn: function () {           //当进度条完成自动更新后执行的回调函数。该函数没有参数。
                Ext.fly('p2text').update('完成。');
            }
        });
    });

[html]
   

[Js]
    //等候进度条，当第三方事件结束时，停止。
    var pbar3 = Ext.create("Ext.ProgressBar", {
        renderTo: 'p3',
        width: '250px'
    });

    Ext.fly("button3").on('click', function () {
        pbar3.wait({
            interval: 100,
            increment: 5
        });
        Ext.fly('p3text').update('第三方事件正在执行，请稍候....');

        setTimeout(function () {
            pbar3.reset();
            Ext.fly('p3text').update('执行完毕.');
        }, 5000);
    });