（五）ExtJs进度条的几种实现方式

1.今天我们学习ExtJs进度条的实现，我们共介绍8种方式进行实现。

2.我们首先看一下代码和实现的效果，然后进行分析。

提示：看第一种实现的效果，要把Ext.onReady()中的参数改为Read1。其他几种展示时候做出相应修改即可。

效果图：（除了第3种为静态进度条，剩余的都是动态显示）

第一种：

第二种：

第三种：

第四种：

第五种：

第六种：

第七种：

第八种：

分析：

Read1方法是通过使用MessageBox.wait()方法实现进度条。

wait()方法有三个参数msg:String类型，用来显示弹出框内容；title:String类型，弹出框的标题,该参数不是必须的；config:Object类型，进度条的配置，该参数不是必须的。

Read2方法是使用MessageBox.show()方法中的配置参数wait:true，实现动态进度条。

Read3方法是使用MessageBox.show()方法中的配置参数progress:true,实现静态进度条。

Read4方法是（1）使用MessageBox.show()方法中的配置参数progress:true,实现静态进度条，（2）使用TaskManager的start方法和MessageBox.updateProgress()方法实现动态进度条。

Read5方法是使用MessageBox.show()方法中的配置参数wait:true，实现动态进度条，然后配置waitConfig:Object类型，进行进度条配置。

Read6方法和Read4实现一样只是MessageBox.updateProgress参数不同。

Read7方法是（1）创建一个进度条对象。（2）使用TaskManager的start方法和ProgressBar.updateProgress()方法实现动态进度条。

Read8方法（1）创建一个进度条对象。（2）使用ProgressBar.wait()配置进度条功能。

ProgressBar.wait()是通过config进行参数配置的。

1.duration : Number类型，持续时间。

2.interval : Number类型，更新时间。

3.increment : Number类型，进度条没更新一次增加多少，总共100，默认每次增加10。

4.fn : Function类型，更新完毕后所要执行的方法。你可以把进度关闭和一些关闭进度条后的一些业务放到该函数中。

注：由于本人能力有限，如果有愿意更深理解相关知识，可以进入官网Api进行学习。

在线api