Ext js 的幾種進度條（轉）

<script type="text/javascript">
	
	/*1.使用MessageBox.wait()方法實現進度條*/
    function Read1() {
        Ext.Msg.wait("內容","Extjs進度條應用",{text:"正在加載。。。"});
    }
    /*2.使用MessageBox.show()方法中的配置參數wait:true，實現進度條*/
    function Read2() {
        Ext.Msg.show({
        modal:false,
        title:"標題",
        msg:"內容",
        closable:true,
        width:300,
        wait:true
        })
    }
    /*3.使用MessageBox.show()方法中的配置參數progress:true,實現靜態進度條*/
    function Read3() {
        Ext.Msg.show({
        title:"標題",
        msg:"內容",
        modal:true,
        closable:true,
        width:300,
        progress:true,
        progressText:"保存進度"
        })
    }
    
    function Read4() {
        var progressBar=Ext.Msg.show({
        title:"標題",
        msg:"通過進度的大小來控制進度",
        progress:true,
        width:300
        });
        var count=0;
        var bartext="";
        var curnum=0;
        Ext.TaskMgr.start({
            run:function () {
                count++;
                if (count>=10) {
                    progressBar.hide();
                }
                curnum=count/10;
                bartext=curnum*100+"%";
                progressBar.updateProgress(curnum,bartext);
            },
            interval:1000
        })
    }
    function Read5() {
        var progressBar=Ext.Msg.show({
            title:"標題",
            msg:"通過固定時間完成進度",
            width:300,
            wait:true,
            waitConfig:{interval:500,duration:4500,fn:function () {
                Ext.Msg.hide();
            }},
            closable:true
        });
    }
    
    function Read6() {
        var msgbox=Ext.Msg.show({
            title:"進度條應用",
            msg:"提示內容",
            closable:true,
            width:300,
            modal:true,
            progress:true
        });
        var count=0;
        var curnum=0;
        var msgtext="";
        Ext.TaskMgr.start({
            run:function () {
                count++;
                if (count>10) {
                    msgbox.hide();
                }
                curnum=count/10;
                msgtext="當前加載:"+curnum*100+"%";
                msgbox.updateProgress(curnum,msgtext,'當前時間:'+new Date().format('Y-m-d g:i:s A'));
            },
            interval:1000
            
        })
        
    }
    function Read7() {
        var progressBar=new Ext.ProgressBar({
            text:'working......',
            width:300,
            applyTo:id2
        });
        var count=0;
        var curnum=0;
        var msgtext="";
        Ext.TaskMgr.start({
            run:function () {
                count++;
                if (count>10) {
                    progressBar.hide();
                }
                curnum=count/10;
                msgtext=curnum*100+"%";
                progressBar.updateProgress(curnum,msgtext);
            },
            interval:1000
        })  
    }
    function R8() {
        //自動模式進度條
        var progressBar=new Ext.ProgressBar({
            text:'waiting......',
            width:300,
            applyTo:id2
        });
        progressBar.wait({
            interval:1000,
            duration:10000,
            increment:10,
            scope:this,
            fn:function () {
                alert("更新完畢");
            }
        });
    }
    
    Ext.onReady(R8);
    </script>

 Read1方法是通過使用MessageBox.wait()方法實現進度條。

wait()方法有三個參數msg:String類型，用來顯示彈出框內容；title:String類型，彈出框的標題,該參數不是必須的；config:Object類型，進度條的配置，該參數不是必須的。

Read2方法是使用MessageBox.show()方法中的配置參數wait:true，實現動態進度條。

Read3方法是使用MessageBox.show()方法中的配置參數progress:true,實現靜態進度條。

Read4方法是（1）使用MessageBox.show()方法中的配置參數progress:true,實現靜態進度條，（2）使用TaskManager的start方法和MessageBox.updateProgress()方法實現動態進度條。

Read5方法是使用MessageBox.show()方法中的配置參數wait:true，實現動態進度條，然后配置waitConfig:Object類型，進行進度條配置。

Read6方法和Read4實現一樣只是MessageBox.updateProgress參數不同。

Read7方法是（1）創建一個進度條對象。（2）使用TaskManager的start方法和ProgressBar.updateProgress()方法實現動態進度條。

Read8方法（1）創建一個進度條對象。（2）使用ProgressBar.wait()配置進度條功能。

ProgressBar.wait()是通過config進行參數配置的。

1.duration : Number類型，持續時間。

2.interval : Number類型，更新時間。

3.increment : Number類型，進度條沒更新一次增加多少，總共100，默認每次增加10。

4.fn : Function類型，更新完畢后所要執行的方法。你可以把進度關閉和一些關閉進度條后的一些業務放到該函數中。

作者：fubo1990
來源：CSDN
原文：https://blog.csdn.net/fubo1990/article/details/50922082