`
阅读更多
大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个系列的文章。
个人认为用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.CAMCEL,
                                         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

    `Ext.MessageBox.alert`函数用于显示一个简单的警告对话框,通常用于向用户传递一条信息或通知。 **示例代码:** ```javascript Ext.MessageBox.alert("hello", "nihaoa!"); ``` 该示例展示了如何通过`alert`方法来...

    Extjs Ext.MessageBox.confirm 确认对话框详解

    Ext.MessageBox.confirm&#40;&#41;详解 显示一个确认对话框,用来代替JavaScript标准的confirm&#40;&#41;方法,具有两个按钮“是”和“否”如果为其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的...

    ExtJS Ext.MessageBox.alert&#40;&#41;弹出对话框详解

    代码如下: Ext.onReady(function() { Ext.Msg.alert&#40;‘提示’, ‘逗号分隔参数列表’&#41;; //这种方式非常常见的 ...接下来认识一下Ext.MessageBox Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种

    Ext--MessageBox教程

    在上述代码中,`buttons: Ext.MessageBox.INFO`表示对话框显示的是一个信息图标,`fn`参数是回调函数,当用户点击按钮时执行。`buttonId`会返回用户点击的按钮标识,如'ok'(确定)、'yes'(是)或'no'(否)。 `...

    Ext messageBox hide 小应用

    在IT行业中,`Ext messageBox` 是一个常用于弹出对话框的组件,它属于Ext JS框架的一部分。Ext JS是一个广泛使用的JavaScript库,用于构建富客户端的Web应用程序。`messageBox` 提供了一种优雅的方式来展示警告、...

    extjs弹出框 n秒后消失

    icon: Ext.MessageBox.INFO, // 可选值有 Ext.MessageBox.INFO, Ext.MessageBox.WARNING, ExtMessageBox.QUESTION, Ext.MessageBox.ERROR buttons: Ext.MessageBox.CLOSE, // 默认按钮,也可以自定义为其他组合,...

    Ext.MessageBox工具类简介

    案例如下: 代码如下: Ext.onReady(function(){ Ext.MessageBox.alert&#40;“提示”,”请单击我,确定”,callBack&#41;; function callBack(id){ alert&#40;“单击的按钮ID是:”+id&#41;; } Ext.MessageBox....

    ext学习资料,ext js开发前台页面

    使用`Ext.MessageBox.show()`创建一个带有进度条的对话框,需要确保`progress`为`true`,并可以调用`Ext.MessageBox.hide()`来隐藏对话框,或者使用`updateProgress()`方法更新进度条的状态,传入当前进度值、...

    ext 教材 ext js 教程

    1. `Ext.MessageBox.alert()` `alert()` 方法用于显示一个简单的警告对话框,包含一个标题、消息和一个确定按钮。两个必选参数是 `title` 和 `msg`,分别表示对话框的标题和显示的消息。可选参数是一个回调函数,当...

    Ext原理.txt

    `Ext.MessageBox.alert()` 方法用于显示一个简单的警告对话框,其中包含一条消息和一个“确定”按钮。该方法接受三个参数: - `title`:对话框的标题。 - `msg`:显示在对话框中的消息文本。 - `fn`:可选的回调...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    一个相当不错的extjs入门文档,整个ext的控件,上边很多实例。有助于新手学习。

    `EXT.MessageBox.alert()` 方法用于创建一个简单的警告对话框,包含一个标题、一条消息和一个可选的回调函数。标题和消息是必需的参数,回调函数会在用户点击对话框的确定按钮后执行。例如: ```javascript Ext....

    Ext.Array例子

    2. **确认对话框**:`Ext.MessageBox.confirm(title, message, callback, scope)` 显示一个确认对话框,用户点击确定或取消后执行回调函数 3. **信息消息**:`Ext.MessageBox.info(message)` 显示信息对话框 4. **...

    非常有用的EXT学习总结

    1. `Ext.MessageBox.alert()`方法: 这个方法用于显示一个简单的警告对话框,包含一个确定按钮。它接受三个参数:标题(title)、消息内容(msg)和一个可选的回调函数(function)。当用户点击确定按钮后,回调...

    EXT组件一些属性与方法(MessageBox)[文].pdf

    1. **Ext.MessageBox.alert()** 这个方法用于创建一个只包含“确定”按钮的警告对话框。参数包括: - `title`:对话框的标题。 - `msg`:显示的警告信息。 - `fn`(可选):用户点击按钮后的回调函数。 - `...

    learning ext js 中文版之在对话框中添加图标和按钮事件

    EXT JS提供了多种预设图标,例如`Ext.MessageBox.INFO`、`Ext.MessageBox.WARNING`、`Ext.MessageBox.ERROR`等,也可以使用自定义的CSS类来设置特定的图标。 按钮和按钮事件的处理是EXT JS中对话框功能的重要部分。...

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版)

    60. Renamed Coolite.Ext.Web.MessageBox.Config to Ext.Net.MessageBoxConfig 61. XmlReader: rename TotalRecords to the TotalProperty 62. Added new .After property to DirectEvents. The .After ...

    Ext很好的学习资料

    1. **Ext.MessageBox.alert()**: 这个方法用于显示简单的警告对话框,包含一个标题、一条消息和一个可选的回调函数。当用户点击确定按钮后,回调函数会被执行。例如: ```javascript Ext.MessageBox.alert(...

    Ext 添加功能form表单实例

    icon: Ext.MessageBox.INFO, width: 220 }); return; } userForm.getForm().submit({ waitMsg: "正在保存,请稍候...", url: "${ctx}/user.do?method=jsonSave&rIdList=" + Ext.getCmp("rIdList")....

Global site tag (gtag.js) - Google Analytics