在本节内容中,我们来看看ExtJS中的等待对话框。

首先来看一个简单的例子:

这种对话框会一直滚动,直到被关闭。我们看一下它的创建代码:

Ext.get("btn5").on("click", function () {
Ext.MessageBox.wait("正在处理,请稍候...", "等待");
Ext.defer(function () {
Ext.MessageBox.close();
}, 3000);
});

在这段代码中,首先使用Ext.MessageBox.wait()方法创建一个等待对话框,这个方法接收三个参数(我们在这里只传递了两个):

  • 第一个参数是显示的内容
  • 第二个参数是标题
  • 第三个参数是进度条的配置项(我们在例子中省略了这个参数)

在完成对话框创建之后,我们使用定时方法,在3秒以后将这个对话框关闭。

与进度条对话框的区别

从效果上看,等待对话框与进度条对话框非常相似,那么我们什么时候使用等待对话框,什么时候使用进度条对话框呢?

如果你明白了他们之间的区别,在使用的时候就非常方便取舍了。

进度条对话框中显示的进度是需要我们控制的,也就是说,如果你知道一件事情的处理进度,并能够及时的更新进度条,那么建议使用进度条对话框。

如果说你要处理一个事情,但是不知道处理时间,这是我们就会用到等待对话框了,等待对话框中的进度条会一直循环,直到我们处理完成后将它关闭掉。

 

实用ExtJS教程100例-004:等待对话框Ext.MessageBox.wait的更多相关文章

  1. 实用ExtJS教程100例-001:开天辟地的Hello World

    ExtJS功能繁多,要想彻底的了解确实很困难.作为初学者,如何能找到一条快速的通道呢?我觉得,如果你有Javascript的基础,那就不要惧怕ExtJS的复杂,从动手开始,遇到问题,解决问题,积累经验 ...

  2. 实用ExtJS教程100例-005:自定义对话框Ext.MessageBox.show

    我们对ExtJS对话框进行了三篇演示: MessageBox的三种用法 进度条对话框Ext.MessageBox.progress 等待对话框Ext.MessageBox.wait 通过上面三篇内容的 ...

  3. 实用ExtJS教程100例-003:进度条对话框Ext.MessageBox.progress

    在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条. 进度条对话框 我们可以使用下面的代码来在MessageBox中显示一个进度条: Ext ...

  4. 实用ExtJS教程100例-002:MessageBox的三种用法

    在上一节中,我们用到了MessageBox,在本文中,我们将介绍一下ExtJS中常用的三种MessageBox. Ext.MessageBox.alert() 这个方法用来打开一个普通的对话框,对话框 ...

  5. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  6. 实用ExtJS教程100例-008:使用iframe填充ExtJS Window组件

    上面两节中我们分别演示了ExtJS Window的常用功能 和 如何最小化ExtJS Window组件,在这篇内容中我们来演示一下如何使用iframe填充window组件. 思路很简单,首先创建一个w ...

  7. 实用ExtJS教程100例-011:ExtJS Form 使用JSON数据赋值和取值

    上一节中我们演示了ExtJS Form的异步加载和提交数据,本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值. 系列ExtJS教程持续更新中,点击查看>>最新E ...

  8. 实用ExtJS教程100例-010:ExtJS Form异步加载和提交数据

    ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 F ...

  9. 实用ExtJS教程100例-007:ExtJS中Window组件最小化

    在上一节中我们演示了如何使用ExtJS的Window组件,这篇内容中我们来演示一下如何将窗口最小化. 要让ExtJS标题栏中显示最小化按钮并不麻烦,只需要设置 minimizable: true 即可 ...

随机推荐

  1. CentOS 7.x 安装 Docker

    安装之前确保之前没有安装过docker为此首先删除存在的docker程序 sudo yum remove docker \ docker-common \ docker-selinux \ docke ...

  2. Angular 快速学习笔记(1) -- 官方示例要点

    创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据 管道pipe 格式化数据 <h2>{{ hero.name | u ...

  3. Java总结——常见Java集合实现细节(1)

    Java提高——常见Java集合实现细节(1) 2018年04月18日 15:07:35 阅读数:25 集合关系图 Set和Map set代表一种集合元素无序.集合元素不可重复的集合 map代表一种由 ...

  4. java 报错英文

    —————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流! —————————— 第一章:JDK(Java Development Kit) java开发工具包 J ...

  5. php 导入excel文件

    excel.php <?phprequire_once 'PHPExcel/PHPExcel.php';require_once 'PHPExcel/PHPExcel/IOFactory.php ...

  6. laravel5 session的基本使用

    配置session配置文件位于config/session.hpp 默认情况下使用session驱动为文件驱动,在生产环境中,建议使用memcache或者redis驱动以便获取更快的session性能 ...

  7. 大数据小视角4:小议Lambda 与 Kappa 架构,不可变数据的计算探索

    这个系列文章之前因为私事荒废了很久,继续更新--之前与老大谈论架构时,老大和我聊了聊分布式数据处理之中的Lambda结构,之前在<Designing Data-Intensive Applica ...

  8. .NET工作准备--02基础知识

    (已过时) 框架基础,语法基础,字符串&集合&流,常见类和接口; 02.net基础(重点) -第一部分 框架基础 1.基础概念 CTS(Common Type System),CLS( ...

  9. sublime安装package control 的方法

    1.安装sublime3后,点击菜单 view>show console,复制以下代码按回车即可,安装时稍微有些卡,需要耐心等待. import urllib.request,os; pf = ...

  10. 循序渐进学.Net Core Web Api开发系列【15】:应用安全

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍W ...