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

相关文章

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

Mysql用户授权(GRANT)语法及示例解读

《Mysql用户授权(GRANT)语法及示例解读》:本文主要介绍Mysql用户授权(GRANT)语法及示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql用户授权(GRANT)语法授予用户权限语法GRANT语句中的<权限类型>的使用WITH GRANT

Java中Scanner的用法示例小结

《Java中Scanner的用法示例小结》有时候我们在编写代码的时候可能会使用输入和输出,那Java也有自己的输入和输出,今天我们来探究一下,对JavaScanner用法相关知识感兴趣的朋友一起看看吧... 目录前言一 输出二 输入Scanner的使用多组输入三 综合练习:猜数字游戏猜数字前言有时候我们在

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符(formatspecifier)快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/