ExtJS进度条使用示例

"这篇文章主要介绍了如何在ExtJS中显示进度条，包括两种不同的方法：一种是基于任务管理器的任务进度显示，另一种是等待提示式的进度显示。" 在ExtJS中，进度条通常用于向用户反馈某个操作的进行状态，比如数据加载、文件上传等耗时过程。下面将详细介绍两种实现进度条显示的方法。 1. **基于任务管理器的任务进度显示** 此方法适用于已知执行次数的任务，例如读取固定数量的数据。以下是一个示例代码： ```javascript function Read4() { var progressBar = Ext.Msg.show({ title: "", msg: "通过数据计数显示进度", progress: true, width: 300 }); var count = 0; var barText = ""; var currNum = 0; Ext.TaskMgr.start({ run: function () { count++; if (count >= 10) { progressBar.hide(); } currNum = count / 10; barText = currNum * 100 + "%"; progressBar.updateProgress(currNum, barText); }, interval: 1000 // 每隔1秒更新一次 }); } ``` 在这个例子中，我们创建了一个消息框（`Ext.Msg.show()`）并启用了进度条功能。然后通过`Ext.TaskMgr.start()`创建一个任务，每秒递增计数器，并根据计数值更新进度条。当计数达到预设值时，进度条隐藏。 2. **等待提示式的进度显示** 这种类型的进度条常用于未知持续时间的操作，如等待服务器响应。示例代码如下： ```javascript function Read5() { var progressBar = Ext.Msg.show({ title: "", msg: "等待提示式进度显示", width: 300, wait: true, // 启用等待模式 waitConfig: { // 等待提示的配置 interval: 500, // 更新间隔 duration: 5000, // 持续时间 fn: function () { Ext.Msg.hide(); // 持续时间结束后自动隐藏 } }, closable: true // 允许用户手动关闭 }); } ``` 在这里，我们使用了`Ext.Msg.show()`的`wait`参数，设置等待提示，并提供了等待配置，包括间隔时间和持续时间。当指定的持续时间过后，进度条会自动隐藏。 此外，还可以使用`Ext.Msg.wait()`函数创建等待提示，例如： ```javascript Ext.Msg.wait("正在加载数据...", "json提示"); // 参数一为提示文本，参数二为提示标题 ``` 同时，可以结合`Ext.TaskMgr`来实现更复杂的进度更新逻辑。例如，如果需要在后台执行一系列任务，可以启动一个新的任务并在每次完成一部分任务时更新进度条。 总结来说，ExtJS提供了一种灵活的方式显示进度条，无论是基于已知任务进度还是未知持续时间的等待提示，都能帮助提升用户体验，让用户了解操作的实时进度。