Extjs弹窗控件——Ext.MessageBox

Extjs弹窗控件——Ext.MessageBox首先,浏览器自带的弹窗有alert、confirm、prompt等。js弹窗的3种方式:alert、confirm、prompt鉴于其外观丑陋以及配置不方便,我们常采用Extjs自带的弹窗控件。//

大家好,又见面了,我是你们的朋友全栈君。

首先,浏览器自带的弹窗有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 更新  —————————————– 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155647.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • QCustomPlot运用

    QCustomPlot运用日常记录学习QCustomPlot的配置和编码过程。1.结构QCustomPlot类的命名规则是QCP加xxx。类的组织有很强的区分性,就如图Qt中的模块分类。  Class Name QCPPlotTitle 图表标题 QCPAxis 坐标轴、上下左右四个坐标轴 …

    2022年10月17日
  • Jenkins(4)docker容器内部修改jenkins容器时间「建议收藏」

    Jenkins(4)docker容器内部修改jenkins容器时间「建议收藏」前言用docker搭建的Jenkins环境时间显示和我们本地时间相差8个小时,需修改容器内部的系统时间查看时间查看系统时间date-R进入docker容器内部,查看容器时间dockere

  • JavaScript面向对象思想

    JavaScript面向对象思想javascript中的面向对象:ECMA标准定义JS中的对象:无序属性的集合,其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值,其中的属性或方法都有一个名字,根据这个名字可以访问相映射的值(值可以是基本值/对象/方法)面向对象三个基本特征是:封装、继承、多态封装:将对象运行所需的资源封装在程序对象中,基本上是方法和数据。对象是“公布其接口”。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是“不要告诉我你是怎么做的,只要做就可以了。”对象可

    2022年10月31日
  • 第一次面试实习生经历

    第一次面试实习生经历

  • hashmap遍历方式_图的深度遍历

    hashmap遍历方式_图的深度遍历HashMap的遍历可以用entrySet();keySet()可以获得key,根据key可以用get(key)获取value;values()可以获取map里所有的值,返回的是一个Collection。      //entrySet      Mapmap1=newHashMap();;/*      Iterator>iterator1=

  • Caffe2安装_caffe教程

    Caffe2安装_caffe教程一、依赖库的安装首先1.首先需要安装Ubuntu16.04与14.04都需要的依赖库。sudoaptupdatesudoaptinstall-y–no-install-recommends\build-essential\cmake\git\libgoogle-glog-dev\lib…

    2022年10月26日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号