ExtJS 的各种进度条、加载遮罩

2019一路前行

已于 2024-01-07 23:14:12 修改

阅读量653

点赞数 15

分类专栏： java 前端文章标签： java 前端

于 2024-01-07 12:31:07 首次发布

本文链接：https://blog.csdn.net/weixin_42307069/article/details/135436391

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

java

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在ExtJS框架中使用不同的方法创建和定制进度条，包括简单的进度条、带百分比和标题的进度条，以及利用遮罩层实现加载动画。通过定时器和递归setTimeout展示了动态更新进度的技巧。

摘要由CSDN通过智能技术生成

ExtJS 是一个用于构建企业级Web应用程序的JavaScript框架。

1、ExtJS 的进度条

1-1 简单的进度条

Ext.MessageBox.show({
     msg: '加载中，请稍候...',
     width: 300,
     wait: true,
     waitConfig: {interval: 200} //进度条更新的时间间隔，单位毫秒
 });
 setTimeout(function () {
     Ext.MessageBox.hide(); //关闭加载中提示框
 }, 5000);

效果显示：
在这里插入图片描述

1-2 有进度百分比的进度条

说明：setInterval会每隔一段时间重复执行指定的代码，而setTimeout只会在指定的时间间隔之后执行一次指定的代码。

1 使用定时器去刷新进度条百分比

Ext.MessageBox.show({
    msg: '加载中，请稍候...',
    width: 300,
    wait: true,
    waitConfig: {interval: 500} //进度条更新的时间间隔，单位毫秒
});
//模拟加载过程，更新进度
var progress = 0;
var progressInterval = setInterval(function () {
   progress += 0.1;
   Ext.MessageBox.updateProgress(progress, '已加载 ' + Math.round(progress * 100) + '%');
   if (progress >= 1) {
       clearInterval(progressInterval); //清除定时器
       Ext.MessageBox.hide(); //关闭加载中提示框
   }
}, 500);

效果显示：
在这里插入图片描述
如果在刷新百分比时，想要修改提示内容：

Ext.MessageBox.updateProgress(progress, '已加载 ' + Math.round(progress * 100) + '%');
//多添加一个传参，改为如下：
Ext.MessageBox.updateProgress(progress, '已加载 ' + Math.round(progress * 100) + '%','正在加载测试数据');

效果显示：
在这里插入图片描述

2 使用setTimeout 去刷新进度条百分比

通过递归调用setTimeout来实现定时更新进度条的效果。

Ext.MessageBox.show({
 msg: '加载中，请稍候...',
    width: 300,
    wait: true,
    waitConfig: {interval: 500} //进度条更新的时间间隔，单位毫秒
});
//模拟加载过程，更新进度
var progress = 0;
var updateProgress = function() {
    progress += 0.1;
    Ext.MessageBox.updateProgress(progress, '已加载 ' + Math.round(progress * 100) + '%');
    if (progress < 1) {
        setTimeout(updateProgress, 500);
    } else {
        Ext.MessageBox.hide();
    }
};
setTimeout(updateProgress, 500);

效果显示：
在这里插入图片描述

1-3 有标题的进度条

1、有标题的简易进度条

Ext.MessageBox.wait('加载中，请耐心等待...', '请等待');
setTimeout(function () {
     Ext.MessageBox.hide(); //关闭加载中提示框
 }, 5000);

效果显示：
在这里插入图片描述

2、详细配置的进度条

Ext.MessageBox.show({
    msg : '共有1000000条数据，加载预计耗时5秒',
    title : '请耐心等待...',
    progressText : '正在加载...',
    width : 400,
    progress : true,
    closable : false,
    animateTarget : '加载'
});
setTimeout(function () {
    Ext.MessageBox.hide(); //关闭加载中提示框
}, 5000);

效果显示：
在这里插入图片描述

2、遮罩层的加载中

//新建面板
var myComponent = Ext.create('Ext.panel.Panel', {
	title: 'My Panel',
    margin: 20,
    width: 200,
    height: 200,
    renderTo: Ext.getBody()
});
//新建 加载遮罩 组件
var myLoadMask = new Ext.LoadMask({
    msg: 'Loading...',
    target: myComponent
});
//显示遮罩层
myLoadMask.show();
//隐藏遮罩层
setTimeout(function() {
    myLoadMask.hide();
}, 5000);