Extjs进度条

第一种方式:

var pbar1; // 定义一个变量用于进度条对象
var btn1; // 定义一个变量用于进按钮对象
Ext.onReady(function() {
            pbar1 = new Ext.ProgressBar({ // 实例化进度条
                renderTo : "div1", // 进度条呈现的一个DIV
                width : 800, // 进度条的宽度
                text : "单击按钮开始..." // 在进度条里的初始文本
            });
            btn1 = Ext.get("btn1"); // 按钮对象
            btn1.on("click", f1); // 按钮事件，单击时调用f1()函数
        });
var i = 0; // 初始化一个变量为0，下面会用到。
function f1() {
    i++; // 让i加1
    pbar1.updateProgress(i / 100.0); // 让进度条更新到指定的进度。这个值是0-1之间的数，我让i/100.0,以让它的结果是一个小数
    pbar1.updateText("进度:" + i + "%"); // 进度条显示的文本
    if (i == 100) { // 当i==100的时候让按钮状态可以使用，并让i=1，再让进度条停止
        document.getElementById("btn1").disabled = false;
        i = 0;
        clearInterval(x);
    }
    document.getElementById("btn1").disabled = true; // 让按钮的状态为不可用
    setTimeout("f1()", 50);//用setTimeout函数递归调用f1()函数，以达到进度条一直跑的效果
}

第二种方式:

var pbar2;// 定义一个变量用于进度条对象
var btn2;// 定义一个变量用于进按钮对象
Ext.onReady(function() {
            pbar2 = new Ext.ProgressBar({ // 实例化进度条
                renderTo : "div2", // 进度条呈现的一个DIV
                width : 600, // 进度条的宽度
                text : "单击按钮开始..." // 在进度条里的初始文本
            });
            btn2 = Ext.get("btn2"); // 按钮对象
            btn2.on("click", function() {// 按钮事件，单击时执行funciton()
                        Runner.run(pbar2, btn2, 10, function() { // Runner是在下面定义。Runner.run方法参数(进度条对象，按钮对象，进度大小：可以自由设定，进度条完成时执行的行数：如果不做任何事情可以填null)
                                    Ext.Msg.alert("Information",
                                            "进度条已经加载完成......"); // 对话框
                                    pbar2.reset(); // 重置进度条
                                    pbar2.updateText("单击按钮重新开始..."); // 更新进度条的文本
                                });
                    });
        });
// 这个函数是我从Ext官方下载的包里的examples里直接拷贝来的，我也懒得去研究，貌似有点复杂
var Runner = function() {
    var f = function(v, pbar, btn, count, cb) {
        return function() {
            if (v > count) {
                btn.dom.disabled = false;
                cb();
            } else {
                if (pbar.id == 'pbar4') {
                    // give this one a different count style for fun
                    var i = v / count;
                    pbar.updateProgress(i, Math.round(100 * i)
                                    + '% completed...');
                } else {
                    pbar.updateProgress(v / count, 'Loading item ' + v + ' of '
                                    + count + '...');
                }
            }
        };
    };
    return {
        run : function(pbar, btn, count, cb) {
            btn.dom.disabled = true;
            var ms = 5000 / count;
            for (var i = 1; i < (count + 2); i++) {
                setTimeout(f(i, pbar, btn, count, cb), i * ms);
            }
        }
    }
}();

第三种方式:

var pbar3;// 定义一个变量用于进度条对象
var btn3;// 定义一个变量用于进按钮对象
Ext.onReady(function() {
            pbar3 = new Ext.ProgressBar({ // 实例化进度条
                renderTo : "div3", // 进度条呈现的一个DIV
                width : 300, // 进度条的宽度
                text : "单击按钮开始..." // 在进度条里的初始文本
            });
            btn3 = Ext.get("btn3"); // 按钮对象
            btn3.on("click", function() { // 按钮单击事件
                        btn3.dom.disabled = true; // 把按钮设置为不可用状态
                        pbar3.updateText("正在更新..."); // 更新进度条的文本信息
                        pbar3.wait({ // 开始执行进度条
                            interval : 100, // 每次进度的时间间隔
                            duration : 5000, // 进度条跑动的持续时间
                            increment : 50, // 进度条的增量，这个值设的越大，进度条跑的越慢，不能小于1，如果小于1，进度条会跑出范围
                            fn : function() { // 进度条完成时执行的函数，也可设为nulll
                                btn3.dom.disabled = false;// 把按钮设置为可用状态
                                pbar3.updateText("更新完成..单击按钮重新开始...");//更新进度条的文本信息
                            }
                        });
                    });
        });