Ext.MessageBox 学习示例

2024-03-24 00:08
文章标签 学习 示例 ext messagebox

本文主要是介绍Ext.MessageBox 学习示例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

个人认为用extjs做后台很不错,布局比较完美!
1.Ext.MessageBox.alert()方法
      有四个参数,为简单起见,主要介绍前面三个参数:
      alert( title msg function(){} )
      其中title,msg为必选参数,function为可选参数,在关闭弹出窗口后触发。

Ext.MessageBox.alert( " title " , " msg " );

 

  Ext.MessageBox.alert( " title " , " msg " , function (){alert( " 关闭对话框后弹出! " )});


2.Ext.MessageBox.confirm()方法
   基本上同alert()方法一模一样。
   注意这点:

Ext.MessageBox.confirm( " title " , " msg " , function (e){alert(e);});

这个参数e是什么?它是你点击的弹出框的按钮的值,三种值:yes,no,cancel.Alert()方法也是如此,不过只有两种值:ok,cancel.

3.Ext.MessageBox.prompt()方法
   有六个参数,比前面alert方法多一个返回值和是否多行。

Ext.MessageBox.prompt( " title " , " msg " );

 

Ext.MessageBox.prompt( " title " , " msg " , function (e,text){alert(e + " - " + text);});
// 输入"qianxudetianxia",点击ok按钮,弹出ok-qianxudetianxia

 

Ext.MessageBox.prompt( " title " , " msg " , function (e,text){alert(e + " - " + text);}, this , true );
// true为多行,this表示作用域


4.Ext.MessageBox.show()方法
   功能很强大,采用config配置形式,比前面的方法使用更方便。
   参数很多,在此列举最常用的配置参数:

复制代码
1 .animEl:对话框弹出和关闭时的动画效果,比如设置为“id1”,则从id1处弹出并产生动画,收缩则相反
2 .buttons:弹出框按钮的设置,主要有以下几种:Ext.Msg.OK,
                                        Ext.Msg.OKCANCEL,
                                        Ext.Msg.CANCEL,
                                        Ext.Msg.YESNO,
                                        Ext.Msg.YESNOCANCEL
  你也可以自定义按钮上面的字:{
" ok " , " 我本来是ok的 " }。
   若设为false,则不显示任何按钮.
3 .closable:如果为false,则不显示右上角的小叉叉,默认为true。
4 .msg: " 消息的内容 "
5 .title: " 标题 "
6 .fn:关闭弹出框后执行的函数
7 .icon:弹出框内容前面的图标,取值为Ext.MessageBox.INFO,
                                       Ext.MessageBox.ERROR,
                                  Ext.MessageBox.WARNING,
                                  Ext.MessageBox.QUESTION
8 .width:弹出框的宽度,不带单位
9 .prompt:设为true,则弹出框带有输入框
10 .multiline:设为true,则弹出框带有多行输入框
11 .progress:设为true,显示进度条,(但是是死的)
12 .progressText:显示在进度条上的字
13 .wait:设为true,动态显示progress
14 .waitConfig:配置参数,以控制显示progress
复制代码

example:

复制代码
Ext.MessageBox.show({
    title:
" 标题 " ,
    msg:
" 内容的消息 " ,
    buttons:{
" ok " : "我不再显示OK了 " },
    fn:
function (e){alert(e);},
    animEl:
" test1 " ,
     width:
500 ,
    icon:Ext.MessageBox.INFO,
    closable:
false ,
    progress:
true ,
    wait:
true ,
    progressText:
" 进度条 "
   
//  prompt:true
    //  multiline:true
});
复制代码


4.Ext.MessageBox.show()中的进度条的使用
   首先必须知道例外两个方法 Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数,看名字就知道意思),
   注意value为0-1之间的数,表示进度条的进度.
   第一种:(通过进度的大小控制进度,满进度为1)

复制代码
Ext.get( " btn1 " ).on(
          
" click " ,
          
function (){
             Ext.MessageBox.show({
                 title:
" df " ,
                 msg:
" dfd " ,
                 progress:
true ,
                 width:
300 ,
                 closable:
true
             });
             
var  f = function (v){
               
return   function (){
                 
if (v == 12 )
                 {
                   Ext.MessageBox.hide();
                   
// alert("加载完成!");
                 }
                 
else
                 {
                   
var  i = v / 11; 
                   Ext.MessageBox.updateProgress(i,Math.round( 100 * i) + " % completed " ,i);
                 }
               }
             }
             
for ( var  i = 1 ;i < 13 ;i ++ )
             {
               setTimeout(f(i),i
* 500 ); // 从点击时就开始计时,所以500*i表示每500ms就执行一次
             }
          }
   );
复制代码


   第二种:(通过固定时间控制进度加载)

复制代码
Ext.get( " btn1 " ).on(
          
" click " ,
          
function (){
             Ext.MessageBox.show({
                 title:
" 时间进度条 " ,
                 msg:
" 5s后关闭进度框 " ,
                 progress:
true ,
                 width:
300 ,
                 wait:
true ,
                 waitConfig:{interval:
600 }, // 0.6s进度条自动加载一定长度
                 closable: true
             });
             setTimeout(
function (){Ext.MessageBox.hide()}, 5000 ); // 5后执行关闭窗口函数
          }
复制代码


最后关于那个waitConfig的参数,在此说明下:

复制代码
1 .interval:进度的频率
2 .duration:执行进度的持续时间,超过这个时间后,interval失效,不再产生进度效果,但进度狂也不会消失。
3 .fn:duration的时间到后执行的函数
所以,上面的通过时间控制进度另外一种写法为:
    Ext.get(
" btn1 " ).on(
          
" click " ,
          
function (){
             Ext.MessageBox.show({
                 title:
" 时间进度条 " ,
                 msg:
" 5s后关闭进度框 " ,
                 progress:
true ,
                 width:
300 ,
                 wait:
true ,
                 waitConfig:{
                              interval:
600 ,
                              duration:
5000 ,
                              fn:
function (){
                                Ext.MessageBox.hide();
// 让进度条消失
                              }},
                 closable:
true
             });
             
// setTimeout(function(){Ext.MessageBox.hide()},5000);
          }
   );
效果一样。
复制代码

这篇关于Ext.MessageBox 学习示例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/839942

相关文章

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

golang 日志log与logrus示例详解

《golang日志log与logrus示例详解》log是Go语言标准库中一个简单的日志库,本文给大家介绍golang日志log与logrus示例详解,感兴趣的朋友一起看看吧... 目录一、Go 标准库 log 详解1. 功能特点2. 常用函数3. 示例代码4. 优势和局限二、第三方库 logrus 详解1.

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.

Redis 中的热点键和数据倾斜示例详解

《Redis中的热点键和数据倾斜示例详解》热点键是指在Redis中被频繁访问的特定键,这些键由于其高访问频率,可能导致Redis服务器的性能问题,尤其是在高并发场景下,本文给大家介绍Redis中的热... 目录Redis 中的热点键和数据倾斜热点键(Hot Key)定义特点应对策略示例数据倾斜(Data S

JavaScript Array.from及其相关用法详解(示例演示)

《JavaScriptArray.from及其相关用法详解(示例演示)》Array.from方法是ES6引入的一个静态方法,用于从类数组对象或可迭代对象创建一个新的数组实例,本文将详细介绍Array... 目录一、Array.from 方法概述1. 方法介绍2. 示例演示二、结合实际场景的使用1. 初始化二

C#中的 StreamReader/StreamWriter 使用示例详解

《C#中的StreamReader/StreamWriter使用示例详解》在C#开发中,StreamReader和StreamWriter是处理文本文件的核心类,属于System.IO命名空间,本... 目录前言一、什么是 StreamReader 和 StreamWriter?1. 定义2. 特点3. 用

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》:本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使

Java强制转化示例代码详解

《Java强制转化示例代码详解》:本文主要介绍Java编程语言中的类型转换,包括基本类型之间的强制类型转换和引用类型的强制类型转换,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录引入基本类型强制转换1.数字之间2.数字字符之间引入引用类型的强制转换总结引入在Java编程语言中,类型转换(无论