Extjs弹窗控件——Ext.MessageBox

首先，浏览器自带的弹窗有alert、confirm、prompt等。js弹窗的3种方式：alert、confirm、prompt

鉴于其外观丑陋以及配置不方便，我们常采用Extjs自带的弹窗控件。

 

// 基本的alert:
Ext.Msg.alert('Status', 'Changes saved successfully.');

// 用户对话框，用一个回调函数处理结果:
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
    if (btn == 'ok'){
        // 处理文本值，然后关闭...
    }
});

// 使用配置选项显示一个对话框:
Ext.Msg.show({
   title:'Save Changes?',
   msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
   buttons: Ext.Msg.YESNOCANCEL,
   fn: processResult,
   animEl: 'elId',
   icon: Ext.MessageBox.QUESTION
});

 

 

 

------------------------------------- 以上转载自API文档  ------------------------------------------- 

 

弹窗默认按钮文本的都是ok、cancel、yes、no等中文，如需自定义按钮文字，可以这么做：

 Ext.MessageBox.buttonText.ok = "确定";
 Ext.MessageBox.buttonText.cancel = "取消";

即调用buttonText这个属性下的属性，支持的属性有ok、cancel、yes、no

 

另外记一下使用案例：

 

     Ext.getCmp("interviewOrderDetailGrid").selModel.selectAll();
                    Ext.MessageBox.buttonText.ok = "确定";
                    Ext.MessageBox.buttonText.cancel = "取消";
                    Ext.MessageBox.prompt('', '请填写订购批次的名称:', function (btn,text) {
                        if(btn == "cancel") {
                            Ext.getCmp("interviewOrderDetailGrid").selModel.clearSelections();
                        } else if (btn == "ok") {
                            if (text.match(/^[ ]*$/)){
                                alert("批次名称不能为空，请重新订购");
                                Ext.getCmp("interviewOrderDetailGrid").selModel.clearSelections();
                            } else {
                                var orderGroup = Ext.getCmp("interviewOrderListCardList").items.items[0].cardValue;
                                var params = {
                                    SERVICE_ID:[25, 20, 1012], 
                                    orderGroup:orderGroup,
                                    orderGroupName:text
                                };
                                var url = "";
                                var type = "";
                                var tmpFn = function(data){
                                    var result = JSON.parse(data);
                                    if(result.success){
                                        alert("订单提交成功！\n"+Ext.encode(result.data.detailMap)+"\n"+result.data.note);
                                        Ext.getCmp("interviewMenuOrderSearchPanelSureBtn").el.dom.click();                         
                                    }else{
                                        alert(result.data.msgs[0].message);
                                    }
                                };
                                Ext.jquery.getData(params,url,type,tmpFn);
                            } 
                        }
                    });

 

 

----------------------------------------------------- 2017.2.13 更新  ----------------------------------------------------

 

 

 

1、Ext.MessageBox

//Ext.MessageBox为我们提供的 alert/confirm/prompt 等完全可以代替浏览器原生 

Ext.MessageBox.alert()

  Ext.MessageBox.alert('标题','内容',function(btn){

      //参数一:窗口的标题;

      //参数二:窗口的内容;

      //参数三:回调函数;

      alert('你刚刚点击了'+btn);

  });

 

2、Ext.MessageBox.confirm()

 //confirm为用户提供了 Yes和No, 它们会在需要用户作出判断时用到

  Ext.MessageBox.confirm('选择框','你要选择yes还是no?',function(btn){

      alert('你刚刚点击了'+btn);

  });

 //用户选择Yes或No之后,回调函数即被调用,btn参数的值可能是yes或no,通过得到的值就可以知道用户点击了哪个按钮;

 

 3、Ext.MessageBox.prompt()

 //prompt允许用户输入一段字符串,然后提交给JS处理;

 //prompt还提供了两个按钮,用户可以决定是否将输入的内容提交;

  Ext.MessageBox.prompt('输入框','你输入帐号',function(btn,text){

       alert('你刚刚点击了'+btn+',你刚刚输入了'+text);

   });

  //回调函数参数一:代表用户点击的按钮;

  //回调函数参数二:用户输入的字符;

 

4、对话框的更多配置--show()

 可以输入多行的输入框

 Ext.MessageBox.show({

      title:'多行输入框',       //对话框标题;

      msg:'你可以输入好几行',   //对话框显示的提示内容;

      width:300,

      buttons:Ext.MessageBox.OKCANCEL,  //对话框的按钮,Ext.MessageBox已预置;

      multiline:true,           //允许多行;

      fn:function(btn,text){    //回调函数;

          alert('你刚刚点击了'+btn+',你刚刚输入了'+text);

      }

  });

 

5、自定义对话框的按钮

 Ext.MessageBox.show({

     ...

     buttons:Ext.MessageBox.YESNOCANCEL,

     //Ext.MessageBox预置的yes/cancle按钮;

     ...

   });

 

6、进度条

 //Ext.MessagesBox提供了默认的进度条;

  Ext.MessageBox.show({

    title:'请等待',

    msg:'读取数据中',

    width:240,

    progress:true,        //显示进度条参数;

    closable:false        //隐藏右上角的关闭按钮;

  });

  var f = function(v){

    return function(){

      if(v == 11){

         Ext.MessageBox.hide();

      }else{

          Ext.MessageBox.updateProgress(v/10,'正在读取第'+v+'个,一共10个');

          //updateProgress()函数让进度条状态发生变化;

       }

     };

   };

  for(var i=1; i<12; i++){

    setTimeout(f(i),i*1000); 

     //定时器;10秒之后进度条将隐藏;

   }

  //也可以直接使用progress函数↓↓↓↓↓

  Ext.MessageBox.progress('请等待',msg:'读取数据中');

  自动变化的进度条提示框

  Ext.MessageBox.wait('请等待',msg:'读取数据中');

 

 7、动画效果

  //使用animEl:为对话框设置弹出和关闭的动画效果;

 //对话框会依据指定的HTML元素播放弹出和关闭的动画;

  Ext.MessageBox.show({

     ...

     animEl:'dialog'

    //对应动画是基于id='dialog'的元素;

  });

 

//Ext.MessageBox =Ext.Msg

 //Ext.Msg弹出的对话框都是基于同一个内部Ext.Window实例;因此不能同时使用Ext.MessageBox弹出多个对话框;页面只会显示最后一个窗口; 

 

以上转自：深入浅出ExtJS 第七章 弹出窗口

------------------------------------------- 2017.2.24 更新  -----------------------------------------