MessageBox：弹出窗口 

1 Ext.onReady(function () {
2     Ext.MessageBox.alert("提示信息!","Hello World!");
3 });

 

Ext，是一个对象，onReady是Ext的准备函数。

Ext相关的代码都会在onReady函数中编写，类似于window的onload方法，以及jQuery中的onReady方法。

其执行时机是在页面DOM对象加载完毕后立即执行（这点和jQuery是一样的，window的onload方法，是在整个页面元素都加载完后才执行）。

 

MessageBox：这是ExtJs提供的弹出提示框组件

Ext.MessageBox，可以简写成Ext.Msg，Msg对象有一个alert方法，其方法声明为：

( String title, String msg, [Function fn], [Object scope] ) : Ext.window.MessageBox

Parameters

  • title : String

    标题条文本

  • msg : String

    消息盒本体文本

  • fn : Function (optional)

    消息盒子关闭（点击关闭或者确认按钮）后调用的回调函数

  • scope : Object (optional)

    回调函数被执行的范围(this reference)。

    Defaults to: window

Returns

 

Ext.MessageBox对象，是Ext.Window.MessageBox接口的单例实现

 

1 Ext.onReady(function () {
2     Ext.Msg.alert("提示信息!","Hello World!",function () {
3         console.info("我是回调函数")
4     },this);
5 });

 

MessageBox对象的alert方法，不同于JavaScript中的alert，MessageBox的alert，其实只是一个div，只不过加了一些样式，使其看起来像个弹窗。

怎么验证呢？

只要前后分别调用alert和MessageBox.alert，真正的弹窗，是会发生堵塞的。

 

 

其他Ext.Msg对象的常用方法

confirm方法：确认/取消 弹出框

 1         Ext.onReady(function () {
 2             Ext.Msg.confirm("标题","Yes Or No",function (op) {
 3                 if (op == "yes"){
 4                     alert("确认了");
 5                     //点击确认后要执行的操作
 6                 }else{
 7                     alert("取消了");
 8                     //点击取消后要执行的操作
 9                 }
10             },this);
11         })

　　回调函数有一个参数，传递的是用户点击的按钮，如果点击了确认，就传递yes，如果点击了取消，就传递no

prompt方法：有输入框的确认/取消 弹出框

 1         Ext.onReady(function () {
 2             Ext.Msg.prompt("标题","请输入姓名：",function (id,val) {
 3                 //id=ok id=cancel
 4                 if ("ok" == id){
 5                     //点击了确认要做的事情
 6                     alert("1:"+val);
 7                 }else{
 8                     //点击了取消要做的事情
 9                     alert("2:"+val);
10                 }
11             },this,true,"张三");
12         })

　　回调函数有两个参数，第一个表示用户点击的按钮（ok或cancel），第二个参数表示文本框中的输入值

　　prompt参数说明：标题，提示信息，回调函数，作用域，是否多行文本框，文本框默认值

 

wait方法：进度条

 1         Ext.onReady(function () {
 2             Ext.Msg.wait("提示信息","内容",{
 3                 interval: 500, //循环定时间隔，毫秒
 4                 duration: 5000,//总时长，毫秒
 5                 increment: 3,//执行进度条的次数
 6                 text: 'Updating...',//进度条上的提示文字
 7                 scope: this,
 8                 fn: function(){
 9                     alert("执行完毕");
10                 }
11             })
12         })

 

show方法：自定义弹出框

 1         Ext.onReady(function () {
 2             Ext.Msg.show({
 3                 title: 'Address',
 4                 msg: 'Please enter your address:',
 5                 width: 300,
 6                 height:300,
 7                 buttons: Ext.Msg.OKCANCEL,
 8                 icon: Ext.window.MessageBox.INFO
 9             });
10         })

 

主要还是看文档

 

posted @ 2016-08-14 15:59  csnmd  阅读(8207)  评论(0)  编辑  收藏  举报