Extjs 进度条的应用【转】

目标：

      了解Extjs中进度条的呈现方式

       理解Extjs中进度条的应用范围

内容：

       Ext.MessageBox.show()中的进度条的使用
   首先必须知道例外两个方法 Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数，看名字就知道意思)，
   注意value为0-1之间的数，表示进度条的进度.
   第一种：（通过进度的大小控制进度，满进度为1）

function Read4() {
2 var progressBar=Ext.Msg.show({
3 title:"标题",
4 msg:"通过进度的大小来控制进度",
5 progress:true,
6 300
7 });
8 var count=0;
9 var bartext="";
10 var curnum=0;
11 Ext.TaskMgr.start({
12 run:function () {
13 count++;
14 if (count>=10) {
15 progressBar.hide();
16 }
17 curnum=count/10;
18 bartext=curnum*100+"%";
19 progressBar.updateProgress(curnum,bartext);
20 },
21 interval:1000
22 })
23 }

第二种：（通过固定时间控制进度加载）

function Read5() {
2 var progressBar=Ext.Msg.show({
3 title:"标题",
4 msg:"通过固定时间完成进度",
5 300,
6 wait:true,
7 waitConfig:{interval:500,duration:5000,fn:function () {
8 Ext.Msg.hide();
9 }},
10 closable:true
11 });
12  // setTimeout(function () {
13  // Ext.Msg.hide();
14  // },5000);
15   }

查看效果：

动态更新进度信息

本课总结：

            实现进度条的方法有很多种：

            Ext.msg.wait(“内容”，“标题”,"json配置项显示内容")，{text:"正在加载中......"}

            Ext.msg.show(),其中此方法来实现进度条也有很多种表现方式:wait,progress设置为true都可以显示进度条

            实现动态加载进度条的方法:

            Ext.TaskMgr.start({
            run:function () {
                count++;
                if (count>=10) {
                    progressBar.hide();
                }
                curnum=count/10;
                bartext=curnum*100+"%";
                progressBar.updateProgress(curnum,bartext);
            },
            interval:1000
            })           

            setTimeout(fn,countTime)

            Ext.msg.show()中的waitconfig:{interval:500,duration:5000,fn:function{"加载完后触发方法"}}