Ext信息提示对话框

Posted 小妖丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ext信息提示对话框相关的知识,希望对你有一定的参考价值。

  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);

 

以上是关于Ext信息提示对话框的主要内容,如果未能解决你的问题,请参考以下文章

ext html片段,ext.html · 潜行的青衣/jquery-ui-ext - Gitee.com

ext html片段,ext.html · 潜行的青衣/jquery-ui-ext - Gitee.com

Javascript - ExtJs - 基本组件

替换从 VAST 代码返回的多个 HLS VOD 片段

开始解决片段中的结果

执行代码时有时不显示对话框片段