.“Extjs之进度条的控制”

最新推荐文章于 2024-07-06 16:47:02 发布

huoyunshen

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量127

点赞数

分类专栏： ext 文章标签： xhtml javascript c# ViewUI

本文链接：https://blog.csdn.net/huoyunshen/article/details/83977874

版权

ext 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ 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 width:300,
27 wait:true
28 })
29 }
30 function Read3() {
31 Ext.Msg.show({
32 title:"标题",
33 msg:"内容",
34 modal:true,
35 closable:true,
36 width: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 width: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 width: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 width: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 width: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 width: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>

huoyunshen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
.“Extjs之进度条的控制”

2 3 4 5 6 7 第四课,进度条的应用 8 9 10 11 12 13 14 15 16 Ext.BLANK_IMAGE_URL="MyImage/dlg-bg.gif";17 function Read1() {18...
复制链接

扫一扫