<%@ 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>
分享到：
相关推荐
除了基本的进度条，ExtJs还支持复杂的进度条用法，例如，你可以创建分段的进度条，或者在进度条上添加额外的图标和提示信息。同时，可以结合其他组件，如按钮、表格等，创建更复杂的用户界面。 在实际开发中，...
总结来说，"extjs java 上传文件进度条"这个主题涉及到前端与后端的交互，需要理解ExtJS组件的使用，熟悉Ajax异步上传，掌握Java服务器处理文件上传的逻辑，以及HTTP协议、JSON通信等相关知识。通过这些技术的结合，...
本文将详细解析"ExtJS4多文件上传，带进度条及管理"这一主题，涵盖其核心概念、实现方式以及相关技术。 **一、ExtJS4概述** ExtJS4是Sencha公司推出的一个前端框架，它提供了丰富的组件库和强大的数据绑定机制，...
标题中的“Extjs+java+swf多文件上传进度条显示项目”是一个综合性的Web开发实践，涉及到前端的用户界面、后端的数据处理以及文件上传过程中进度反馈的实现。这个项目利用了Extjs库来构建用户界面，Java作为服务器端...
3. **动态显示和隐藏**：使用`show`和`hide`方法可以控制进度条的可见性。在任务开始时调用`show`，在任务结束或不需要显示时调用`hide`。 4. **异步操作模拟**：在实际应用中，进度条通常与后台的异步操作配合使用...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
每个字段都有其特有的属性，如`fieldLabel`定义了字段标签，`allowBlank`和`blankText`控制是否允许为空及为空时的提示信息。 4. **事件处理器**： - `handler` 函数是按钮的点击事件处理程序，这里负责检查输入的...
7. **安全性与权限控制**：在实现文件上传时，还需要考虑安全问题，如防止CSRF攻击、限制文件类型和大小、保护用户隐私等。此外，对上传文件的访问权限也要进行合理设定。 8. **错误处理**：确保在上传过程中出现...
- **按钮**: 基础组件之一，可以通过配置选项自定义样式和行为。 - **日期选择器**: 用于选择日期的组件，内置了许多实用的功能。 #### 10. 数据与ComboBox - **数据处理**: 使用`Ext.data`包下的类进行数据加载、...
"ExtJS进度条.txt"可能提供了关于如何在上传过程中显示进度信息的代码片段。ExtJS的`Ext.ProgressBar`组件可以用来实时更新文件上传的进度，为用户提供更好的交互体验。 4. **Apache服务器**： Apache是常见的Web...
综上所述，ExtJs教程.pdf文件主要围绕ExtJs框架的MessageBox组件介绍和演示了多种弹窗的创建和配置方式，为Web开发者提供了关于如何在用户界面上弹出信息提示框、确认框、输入框以及带有进度条的交互式弹窗的具体...
- `progress`, `progressText`, `wait`, 和 `waitConfig`: 用于创建进度条效果。 示例： ```javascript Ext.MessageBox.show({ title: "标题", msg: "内容的消息", buttons: {"ok": "我不再显示 OK 了"}, ...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
2. ExtJS前端界面：包含文件选择组件、上传按钮以及可能的进度条展示。 3. HTML表单：用于封装文件上传的必要信息。 4. 详细文档：解释如何配置和调用这些功能的步骤。 5. 源代码：包括.NET的控制器代码和ExtJS的...
通常，开发者会在ExtJS的表单组件中嵌入SWFUpload，通过JavaScript调用SWFUpload的API来控制文件的选择和上传过程。SWFUpload会处理文件的选取、上传、进度反馈等，而ExtJS则负责UI展示和与服务器的通信逻辑。 **VS...
在文件上传场景中，ExtJS可以提供美观的用户界面，如文件选择对话框和进度条，使用户体验更加友好。 **2. SWFUpload**：由于HTML5的普及，Flash现在可能较少使用，但在过去，SWFUpload是实现文件上传（特别是批量...
- 表格控件（Grid）是ExtJS的核心组件之一，用于展示二维表格数据。它提供了排序、分页、过滤、编辑等功能，可高度定制化。 - Grid可以与各种数据源结合，如Store对象，用于管理数据的加载、更新和存储。 3. **...
本笔记详尽地探讨了ExtJs4框架的多个核心功能，包括DOM操作、JS语法扩展、Ajax支持、模板系统、按钮、消息对话框、提示、滚轴与进度条控件、面板与窗口、布局管理、选项卡、数据视图、工具栏、分页栏、状态栏、菜单...