目标：
了解Extjs中进度条的呈现方式
理解Extjs中进度条的应用范围
Demo：
内容：
Ext.MessageBox.show()中的进度条的使用
首先必须知道例外两个方法 Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数，看名字就知道意思)，
注意value为0-1之间的数，表示进度条的进度.
第一种：（通过进度的大小控制进度，满进度为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 }
第二种：（通过固定时间控制进度加载）
代码
1 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{"加载完后触发方法"}}
本课代码:
代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext4.aspx.cs" Inherits="EXT1.Ext4" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7 <title>第四课,进度条的应用</title>
8 <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
9 <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
10 <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
11 </head>
12 <body>
13 <form id="form1" runat="server">
14 <div id="id1">
15 <script type="text/javascript">
16 Ext.BLANK_IMAGE_URL="MyImage/dlg-bg.gif";
17 function Read1() {
18 Ext.Msg.wait("内容","Extjs进度条应用",{text:"正在加载。。。"});
19 }
20 function Read2() {
21 Ext.Msg.show({
22 modal:false,
23 title:"标题",
24 msg:"内容",
25 closable:true,
26 300,
27 wait:true
28 })
29 }
30 function Read3() {
31 Ext.Msg.show({
32 title:"标题",
33 msg:"内容",
34 modal:true,
35 closable:true,
36 300,
37 progress:true,
38 progressText:"保存进度"
39 })
40 }
41 function Read4() {
42 var progressBar=Ext.Msg.show({
43 title:"标题",
44 msg:"通过进度的大小来控制进度",
45 progress:true,
46 300
47 });
48 var count=0;
49 var bartext="";
50 var curnum=0;
51 Ext.TaskMgr.start({
52 run:function () {
53 count++;
54 if (count>=10) {
55 progressBar.hide();
56 }
57 curnum=count/10;
58 bartext=curnum*100+"%";
59 progressBar.updateProgress(curnum,bartext);
60 },
61 interval:1000
62 })
63 }
64 function Read5() {
65 var progressBar=Ext.Msg.show({
66 title:"标题",
67 msg:"通过固定时间完成进度",
68 300,
69 wait:true,
70 waitConfig:{interval:500,duration:5000,fn:function () {
71 Ext.Msg.hide();
72 }},
73 closable:true
74 });
75 // setTimeout(function () {
76 // Ext.Msg.hide();
77 // },5000);
78 }
79
80 function Read7() {
81 var msgbox=Ext.Msg.show({
82 title:"进度条应用",
83 msg:"提示内容",
84 closable:true,
85 300,
86 modal:true,
87 progress:true
88 });
89 var count=0;
90 var curnum=0;
91 var msgtext="";
92 Ext.TaskMgr.start({
93 run:function () {
94 count++;
95 if (count>10) {
96 msgbox.hide();
97 }
98 curnum=count/10;
99 msgtext="当前加载:"+curnum*100+"%";
100 msgbox.updateProgress(curnum,msgtext,'当前时间:'+new Date().format('Y-m-d g:i:s A'));
101 },
102 interval:1000
103
104 })
105
106 }
107 function Read8() {
108 var progressBar=new Ext.ProgressBar({
109 text:'working......',
110 300,
111 applyTo:id2
112 });
113 var count=0;
114 var curnum=0;
115 var msgtext="";
116 Ext.TaskMgr.start({
117 run:function () {
118 count++;
119 if (count>10) {
120 progressBar.hide();
121 }
122 curnum=count/10;
123 msgtext=curnum*100+"%";
124 progressBar.updateProgress(curnum,msgtext);
125 },
126 interval:1000
127 })
128 }
129 function Read9() {
130 //自动模式进度条
131 var progressBar=new Ext.ProgressBar({
132 text:'waiting......',
133 300,
134 applyTo:id2
135 });
136 progressBar.wait({
137 interval:1000,
138 duration:10000,
139 increment:10,
140 scope:this,
141 fn:function () {
142 alert("更新完毕");
143 }
144 });
145 }
146 function Read6() {
147 //字定义漂亮进度条
148
149 }
150 Ext.onReady(Read9);
151 </script>
152 </div>
153 <div id="id2">
154 </div>
155
156 </form>
157 </body>
158 </html>
159