ExtJs 的进度的实现,您可以点这里下载本实例代码,
代码详解:
var pbar1; //定义一个变量用于进度条对象
var btn1; //定义一个变量用于进按钮对象
Ext.onReady(function(){
pbar1=new Ext.ProgressBar({ //实例化进度条
renderTo:"div1", //进度条呈现的一个DIV
width:800, //进度条的宽度
text:"单击按钮开始..." //在进度条里的初始文本
});
btn1=Ext.get("btn1"); //按钮对象
btn1.on("click",f1); //按钮事件,单击时调用f1()函数
});
var i=0; //初始化一个变量为0,下面会用到。
function f1(){
i++; //让i加1
pbar1.updateProgress(i/100.0); //让进度条更新到指定的进度。这个值是0-1之间的数,我让i/100.0,以让它的结果是一个小数
pbar1.updateText("进度:"+i+"%"); //进度条显示的文本
if(i==100){ //当i==100的时候让按钮状态可以使用,并让i=1,再让进度条停止
document.getElementById("btn1").disabled=false;
i=0;
clearInterval(x);
}
document.getElementById("btn1").disabled=true; //让按钮的状态为不可用
setTimeout("f1()",50);//用setTimeout函数递归调用f1()函数,以达到进度条一直跑的效果
}
//*****************进度条实例2*********************//
var pbar2;//定义一个变量用于进度条对象
var btn2;//定义一个变量用于进按钮对象
Ext.onReady(function(){
pbar2 = new Ext.ProgressBar({ //实例化进度条
renderTo:"div2", //进度条呈现的一个DIV
width:600, //进度条的宽度
text:"单击按钮开始..." //在进度条里的初始文本
});
btn2=Ext.get("btn2"); //按钮对象
btn2.on("click",function(){//按钮事件,单击时执行funciton()
Runner.run(pbar2,btn2,10,function(){ //Runner是在下面定义。Runner.run方法参数(进度条对象,按钮对象,进度大小:可以自由设定,进度条完成时执行的行数:如果不做任何事情可以填null)
Ext.Msg.alert("Information","进度条已经加载完成......"); //对话框
pbar2.reset(); //重置进度条
pbar2.updateText("单击按钮重新开始..."); //更新进度条的文本
});
});
});
//这个函数是我从Ext官方下载的包里的examples里直接拷贝来的,我也懒得去研究,貌似有点复杂
var Runner = function(){
var f = function(v, pbar, btn, count, cb){
return function(){
if(v > count){
btn.dom.disabled = false;
cb();
}else{
if(pbar.id=='pbar4'){
//give this one a different count style for fun
var i = v/count;
pbar.updateProgress(i, Math.round(100*i)+'% completed...');
}else{
pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');
}
}
};
};
return {
run : function(pbar, btn, count, cb){
btn.dom.disabled = true;
var ms = 5000/count;
for(var i = 1; i < (count+2); i++){
setTimeout(f(i, pbar, btn, count, cb), i*ms);
}
}
}
}();
//***********进度条实例3**************//
var pbar3;//定义一个变量用于进度条对象
var btn3;//定义一个变量用于进按钮对象
Ext.onReady(function(){
pbar3 = new Ext.ProgressBar({ //实例化进度条
renderTo:"div3", //进度条呈现的一个DIV
width:300, //进度条的宽度
text:"单击按钮开始..." //在进度条里的初始文本
});
btn3=Ext.get("btn3"); //按钮对象
btn3.on("click",function(){ //按钮单击事件
btn3.dom.disabled=true; //把按钮设置为不可用状态
pbar3.updateText("正在更新..."); //更新进度条的文本信息
pbar3.wait({ //开始执行进度条
interval:100, //每次进度的时间间隔
duration:5000, //进度条跑动的持续时间
increment:50, //进度条的增量,这个值设的越大,进度条跑的越慢,不能小于1,如果小于1,进度条会跑出范围
fn:function(){ //进度条完成时执行的函数,也可设为nulll
btn3.dom.disabled=false;//把按钮设置为可用状态
pbar3.updateText("更新完成..单击按钮重新开始...");//更新进度条的文本信息
}
});
});
});
相关推荐
本文将深入探讨如何在ExtJS中实现进度条的显示,这是一个在数据加载、文件上传或任何需要用户等待的任务中非常实用的功能。通过理解和应用以下知识点,你可以有效地在你的ExtJS项目中集成进度条,提升用户体验。 ##...
在本文中,我们将深入探讨如何使用ExtJs3.0结合SWFUpload实现批量文件上传,并在上传过程中实时显示进度。这个技术方案适用于那些需要在Web应用程序中处理大量文件上传的场景,例如用户需要一次性上传多张图片或者...
`ExtJS`和`SwfUpload`是两个在Web开发中用于实现这些功能的工具。本篇将详细讲解如何利用`ExtJS`和`SwfUpload`来创建一个支持多文件上传、下载和删除,并带有进度条显示的系统。 `ExtJS`是一个基于JavaScript的UI...
在设计过程中,EXTJS的图表组件如Ext.chart系列可以用来展示工作流状态和进度,而EXTJS的树形组件(Ext.tree.Panel)则适合用来表示流程的层次结构。例如,"zTreeStandard.gif"和"zTreeStandard.png"可能就是用于...
在本文中,我们将探讨如何利用ExtJS和ASP.NET来实现在服务器端进行长时间操作时,向用户展示一个实时更新的进度条,从而提升用户体验。这一技术对于那些需要处理大量数据或执行复杂计算的Web应用程序至关重要。 ...
在IT行业中,网页开发经常会遇到文件上传的需求,而"jSP+EXTJS实现upload UploadDialog"就是一种常见的解决方法。这个话题主要涵盖了两个关键部分:JavaServer Pages (JSP) 和 ExtJS,它们共同用于创建一个具有文件...
上传一个很大的excel文件到server, server会解析这个excel, 然后一条一条的插入到数据库,整个过程要耗费很长时间,因此当用户点击上传之后,需要显示一个进度条,并且能够根据后台的接收的数据量和处理的进度及时...
ExtJS + JSP 实现表单上传进度条,并且根据上传的字节数动态更新进度条。部署和测试都很简单,直接把progress.zip解压在tomcat/webapps/ROOT下面就可以用http://localhost:8080/upload.html测试。
在.NET和ExtJS框架下实现文件的上传与下载是一项常见的任务,这涉及到Web应用程序与用户交互的核心功能。这里,我们将深入探讨如何利用这两个技术来构建这样的功能。 首先,.NET框架,尤其是ASP.NET,提供了丰富的...
总结来说,理解和使用“ExtJs实现进度条实例”能帮助开发者掌握如何在Web应用中创建具有视觉反馈的进度指示器,提高用户交互体验。通过探索不同的样式和动画选项,可以定制符合应用需求的进度条组件。
在ExtJS 2.x版本中,实现文件上传组件是一项常见的需求,它允许用户在Web应用中选择并上传本地文件到服务器。在本文中,我们将深入探讨如何在ExtJS 2.x中实现这一功能。 首先,我们需要理解ExtJS中的FormPanel组件...
在本文中,我们将深入探讨如何使用ExtJS 3.x实现多文件上传功能,结合Struts2框架进行数据处理。首先,我们需要确保环境配置正确。在描述中提到,我们需要将一系列Struts2相关的库文件复制到项目的`WebContent\lib`...
`ExtJS`是一个流行的JavaScript库,用于构建富客户端界面,而`SWFUpload`则是一个经典的Flash插件,用于实现文件上传,尤其适用于批量上传。这里我们将深入探讨如何在Java环境中,结合Struts2、Spring(s2sh框架)...
- 在ExtJS 2.x版本中实现的多文件上传功能通常无法直接应用于3.x版本。 - 需要对原有代码进行修改,确保其能够在新版本中正常运行。 2. **UploadDialog组件** - `UploadDialog`是一种用于实现文件上传功能的...
在"ExtJS编写的批量上传(Java实现)"这个项目中,我们主要关注的是使用ExtJS进行文件上传,并结合Java后端实现这一功能。 批量上传功能是许多Web应用中的常见需求,它允许用户一次性选择并上传多个文件,提高用户...
本文将深入探讨如何使用ExtJs实现一个进度条实例。 首先,我们需要了解ExtJs中的ProgressBar组件。ProgressBar是ExtJs提供的一种专门用于显示进度的控件,它允许你创建静态或动态的进度条,可以显示百分比或自定义...
在ExtJS端,可以使用`Ext.ProgressBar`来展示文件上传的进度。 总的来说,"struts+extjs实现UploadDialog"涉及到的技术点包括Struts的MVC架构、文件上传处理、ExtJS的组件模型、Ajax通信以及前后端交互的协调。理解...
3. **进度条显示**:在文件上传过程中,EXTJS 提供了进度条来显示每个文件的上传进度,为用户提供实时反馈。 4. **错误处理**:如果某个文件上传失败,`MultiFileUploadField` 可以提供相应的错误提示,帮助用户...
总结来说,ExtJS4实现多附件上传组件涉及的关键技术点有文件选择、事件处理、Ajax上传、进度反馈、错误处理以及自定义组件的封装。通过理解这些知识点,你不仅可以构建一个功能完备的上传功能,还能提升对ExtJS组件...