Ext信息提示对话框

Posted 2020-08-11 小妖丶

　　Ext.window.MessageBox是一个工具类，他继承自Ext.window.Windoe对象，用来生成各种风格的信息提示对话框，其实例对象可以通过Ext.MessageBox或Ext.Msg进行访问，使用Ext.MessageBox和使用Ext.Msg有相同的效果，而后者提供了更简短的调用方式。为了描述方便后边我们将使用Ext.MessageBox代表Ext.window.MessageBox实例对象。

/**
**Ext.MessageBox和Ext.Msg只是引用了Ext.window.MessageBox的实例对象，Ext.Msg.alert方法调用的是Ext.window.MessageBox实例对象的alert方法，
**避免混淆两者之间的关系
**/

　　Ext.MessageBox提供的信息提示对话框显示的文本不仅支持纯文本显示，还支持使用html格式文本，采用HTML中的格式化方法进行排版，效果更佳丰富多彩 ，甚至可以在提示信息中增加动态图标，使提示信息更加生动。

Ext.Msg.alert("提示","<font color=red>支持HTML格式文本</font>")

　　标准JS提供的信息提示对话框会对JS程序的运行产生阻塞。Ext.MessageBox是异步的，它的调用并不会停止浏览器中代码的执行，如果希望在信息提示框出现并且用户做出反馈后才能调用程序，就需要吧相应程序组成一个函数，并且将该函数作为回调函数提供给Ext.MessageBox，再用户做出反馈后该回调函数将被调用，这样就可以达到控制程序执行的目的了。

Ext.onReady(function(){
    alert(‘我会停止程序的执行。‘);
    Ext.Msg.alert(‘提示‘,‘我不会停止程序的执行。‘);
})

/**
**执行代码会看到标准alert显示，而ExtJs版的alert并没有同事显示出来，说明程序的执行在显示标准alert之后被阻塞了，导致接下来的代码并没有执行
**/

Ext.onReady(function(){
    Ext.Msg.alert(‘提示‘,‘我不会停止程序的执行。‘);
    alert(‘我会停止程序的执行。‘);
})

/**
**执行代码会看到标准的alert与ExtJs的alert同时出现，说明ExtJs的alert是异步执行的，他不会阻塞程序代码的继续执行，
**这是他与标准alert最大的区别，会对编写代码的方式产生一定的影响
**/

　　Ext.MessageBox.alert()

　　　　一个只读信息提示框，用来代替js标准的alert()方法，有一个确定按钮，如果为其提供一个回调函数，则该函数将在单击按钮后被调用（不包括右上角的退出按钮），所单击按钮的id将被作为唯一的参数传递到回调函数中

调用格式：
alert(String title, String msg ,[Function fn],[Object scope])
参数说明：
title: 提示框标题;
msg: 显示的信息内容;
[Function fn]: (可选) 回调函数;
[Object scope]: (可选) 回调函数的作用域;

示例：
Ext.Message.alert(‘提示‘,‘请单击我，确认‘,callBack);
function callBack(id){
    alert(‘单击的按钮ID是：‘+id);
}

　　Ext.MessageBox.confirm()

　　　　显示一个确认信息框，用来代替JS标准的confirm()方法，具有两个按钮"是"和"否"，如果为其提供一个回调函数，则该函数将在单击按钮后被调用（不包括右上角的退出按钮），所单击按钮的id将被作为唯一的参数传递到回调函数中。

　　　　Ext.MessageBox.confirm的使用方法，与alert类似该确认对话框也是异步执行，不会造成代码阻塞。

调用格式：
confirm(String title, String msg ,[Function fn],[Object scope])
参数说明：
title: 提示框标题;
msg: 显示的信息内容;
[Function fn]: (可选) 回调函数;
[Object scope]: (可选) 回调函数的作用域;

示例：
Ext.Message.confirm(‘提示‘,‘请单击我，确认‘,callBack);
function callBack(id){
    alert(‘单击的按钮ID是：‘+id);
}

　　Ext.MessageBox.prompt()

　　　　显示一个获取用户输入信息的提示框，用来代替JS标准的prompt()方法，具有两个按钮"确认"和"取消"，并提供文本输入框接受用户的输入，如果为其提供一个回调函数，则该函数将在单击按钮后被调用（不包括右上角的退出按钮），所单击按钮的id将被作为唯一的参数传递到回调函数中。

调用格式：
prompt(String title, String msg ,[Function fn],[Object scope],[Boolean/Number multiline])
参数说明：
title: 提示框标题;
msg: 显示的信息内容;
[Function fn]: (可选) 回调函数;
[Object scope]: (可选) 回调函数的作用域;
[Boolean/Number multiline]: 设置false将显示一个单行文本域，设置为true将以默认高度显示一个多行文本区。或者以像素为单位直接设置文本域的高度。默认flase
示例：
Ext.Message.prompt(‘提示‘,‘请输入一些内容看看‘,callBack,this,true,"我是默认值");
function callBack(id,msg){
    alert(‘单击的按钮ID是：‘+id+‘/n‘+‘输入的内容是：‘+msg);
}

　　Ext.MessageBox.wait()

　　　　显示一个自动滚动的进度条提示框，他经常被用在一个耗时的交互操作当中，他不能定义一个时间间隔自动关闭，程序猿有责任在交互操作完成之后去关闭它

调用格式：
wait(String msg ,[String title], [Object config])
参数说明：
msg: 显示的信息内容;
title: 提示框标题,为可选参数;
[Object config]:用户配置进度条的配置对象,为可选参数;

示例：
Ext.Message.wait(‘请等待，操作需要很长时间！‘,‘提示‘,{
    text:"进度条上的文字"
});

　　Ext.MessageBox.show()

　　　　基于配置来显示新的信息提示框或重置一个已存在的信息提示框，前面介绍的3个提示框内部调用的都是这个方法，尽管那些调用的简单快捷，但是他们并不支持所有的配置项，要简历更加个性化、功能更强大的提示框还需要从掌握Ext.MessageBox.show方法做起

　　　　Ext.MessageBox.show方法支持的配置项非常丰富，不但可以配置提示标题、提示信息、回调函数等常见的部分，他还提供了配置按钮文字及提示图片图标的方法，给了我们控制信息提示框的各种可能性，下边将分别给出这些配置项，和这些配置项共分为3个列表

 

Ext.MessageBox 常用配置项表

配置项	类型	说明
title	String	提示框的标题
msg	String	显示的信息内容
width	Number	对话框的宽度，单位px
maxWidth	Number	对话框的最大宽度，默认600px
minWidth	Number	对话框的最小宽度，默认100px
closable	Boolean	false将隐藏右上角的关闭按钮，默认为true。 如果已设置wait或者progress为true则该配置将被忽略，提示框只能通过程序关闭，不能通过右上角的关闭按钮关闭
modal	Boolean	true为窗口模式，false为非模式窗口
fn	Function	回调函数，它将在点击控制按钮、关闭按钮、或者输入按钮，离开对话框时被调用 如果已设置wait或者progress为true则该配置将被忽略 buttonId:按钮id，如ok，yes，no，cancel text:输入的文字 opt:传入show方法的配置对象
buttons	Number/Boolean	按钮组，可选值见buttons表，默认为false，不显示任何按钮
progress	Boolean	true则显示一个进度条，默认为false，该进度条需要由程序控制滚动
progressText	String	进度条上显示的文字
proxyDrag	Boolean	true则显示一个高亮的拖动代理，默认为false
wait	Boolean	true则显示一个自动滚动的进度条，默认为false
waitConfig	Object	等待进度条的配置对象，再wait为true时有效
prompt	Boolean	true则显示一个单行文本域，默认为false
value	String	如果prompt设置为true，则value值将显示在文本域中
multiline	Boolean	如果prompt设置为true，则multiline为true显示多行文本区，false显示单行文本域
defaultTxetHeight	Number	多行文本区的默认高度，默认值为75px
icon	String	一个样式文件，他为对话框提供一个背景图，详细见icon表

　　

buttons已提供配置对象说明（区分大小写）

提示框按钮配置对象	显示按钮
Ext.Msg.CANCEL	取消
Ext.Msg.NO	否
Ext.Msg.OK	确认
Ext.Msg.OKCANCEL	确认、取消
Ext.Msg.YES	是
Ext.Msg.YESNO	是、否
Ext.Msg.YESNOCANCEL	是、否、取消

 

icon图标样式配置

样式类	说明	效果描述
Ext.Msg.ERROR	错误图标	红圆 叉子
Ext.Msg.INFO	信息图标	气泡 I
Ext.Msg.OUESTION	问题图标	气泡 ？
Ext.Msg.WARNING	警告图标	三角 ！

Ext.MessageBox.show({
    title:‘提示‘,
    msg:‘我有三个按钮，和一个多行文本区‘,
    modal:true,
    prompt:true,
    value:‘请输入‘,
    fn:callBack,
    buttons:Ext.Msg.YESNOCANCEL,
    icon:Ext.Msg.QUESTION
})
function callBack(id,msg){
    alert(‘单击的按钮ID是：‘+id+‘\n‘+‘输入的内容是：‘+msg);
}

　　　　改变默认的按钮文字

//这种方法会覆盖所有的提示文字，会对设置后所有的信息提示框上的按钮文字产生影响，如果要再次改变按钮文字就需要多次设置
//OK
Ext.MessageBox.msgButtons[0].setText(‘‘按钮ok);
//YES
Ext.MessageBox.msgButtons[1].setText(‘按钮yes‘);
//NO
Ext.MessageBox.msgButtons[2].setText(‘按钮no‘);
//CANCEL
Ext.MessageBox.msgButtons[3].setText(‘按钮cancel‘);

　　　　动态更新提示框内容

var msgBox = Ext.MessageBox.show({
    title:"提示",
    msgL"动态更新的信息文字",
    modal:true,
    buttons:Ext.Msg.OK,
    fn:function(){
        //停止定时任务
        Ext.TaskManager.stop(task);
    }
})
//Ext.TaskManager是一个功能类，用来定时执行程序
//在这里我们使用它来定时触发提示信息的更新
var task = {
    run:function(){
        msgBox.updateText(‘会动的时间：‘+Ext.util.Format.date(new Date(),‘Y-m-d g:i:s A‘))
    },
     interval:1000 
}
Ext.TaskManager.start(task);

 　　　　更新进度条及提示信息示例

var msgBox = Ext.MessageBox.show({
    title:"提示",
    msg:‘动态更新的进度条和信息文字"，
    modal:true,
    width:300,
    progress:true
})
var count = 0;    //滚动条被刷新的次数
var percentage = 0; //进度百分比
var progressText = ""; //进度条信息

var task = {
    run : function(){
        count++;
        //计算进度
        precentage = count/10;
        //生产进度条文字
        progressText = "当前完成度："+percentage*100+"%";
        //更新信息提示对话框
        msgBox.updateProgress(percentage,progressText,
            ‘当前时间：‘+Ext.util.Format.date(new Date(),‘Y-m-d g:i:s A‘);
        )
        //刷新10次后关闭信息提示对话框
        if(count > 10){
            Ext.TaskManager.stop(task);
            msgBox.hide();
        }
    },
    interval:100
}
Ext.TaskManager.start(task);