首页 > 代码库 > ext消息框

ext消息框

2024-07-22 10:55:57   224人阅读


Ext JS消息提示框主要包括：alert、confirm、prompt、show

　　1、Ext.MessageBox.alert()

　　调用格式：

　　alert( String title, String msg, [Function fn], [Object scope] )

　　参数说明：

　　title：提示框的标题。

　　msg：显示的消息内容。

　　[Function fn]：（可选）回调函数。

　　[Object scope]：（可选）回调函数的作用域。

　　返回值：

　　Ext.window.MessageBox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello World</title>
    <link href=http://www.mamicode.com/"ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />>　效果图：
　
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.MessageBox.alert支持HTML格式文本</title>
    <link href=http://www.mamicode.com/"ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />>
　效果图：
　　回调函数：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello World</title>
    <link href=http://www.mamicode.com/"ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />>　2、Ext.MessageBox.confirm()
　　调用格式：
　　confirm( String title, String msg, [Function fn], [Object scope] )
　　参数说明及返回值与Ext.MessageBox.alert()相同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.MessageBox.confirm</title>
    <link href=http://www.mamicode.com/"ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />>
　效果图：
　　3、Ext.MessageBox.prompt()
　　调用格式：
　　confirm( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] )
　　参数说明：
　　[Boolean/Number multiline]：设置为false将显示一个单行文本域，设置为true将以默认高度显示一个多行文本区。或者以像素为单位直接设置文本域的高度。默认为false。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.MessageBox.prompt</title>
    <link href=http://www.mamicode.com/"ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />>
　效果图：
　　4、Ext.MessageBox.wait()
　　调用格式：
　　wait( String msg, [String title] , [Object config] )
　　参数说明：
　　msg：显示的消息内容。
　　[String title]：提示框标题，为可选参数。
　　[Object config]：用于配置进度条的配置对象，为可选参数。
　　返回值：
　　Ext.window.MessageBox
 
　　代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.MessageBox.wait示例</title>
    <link href=http://www.mamicode.com/"ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />>
　效果图：
　　5、Ext.MessageBox.show()
　　Ext.MessageBox常用配置项：
配置项类型说明
titleString提示框标题
msgString显示的消息内容
widthNumber对话框的宽度，以px为单位
maxWidthNumber对话框的最大宽度，默认为600px
minWidthNumber对话框的最小宽度，默认为100px
closableBooleanfalse将隐藏右上角的关闭按钮，默认为true
modalBooleantrue为模态窗口，false为非模式窗口
fnFunction
回调函数
参数说明：
buttonId：按钮id
text：输入的文字
opt：传入show方法的配置对象
buttonsNumber/Boolean按钮组，默认为false，不显示任何按钮
progressBooleantrue则显示一个进度条，默认为false，该进度条需要由程序控制滚动
progressTextString进度条上显示的文字，默认为“”
proxyDragBooleantrue则显示一个highlight拖动代理，默认为false
waitBooleantrue则显示一个自动滚动的进度条，默认为false
waitConfigObject等待进度条的配置对象，在wait为true时有效
promptBooleantrue则显示一个单行文本域，默认为false
valueString如果prompt设置为true，则value值将显示在文本域中
multilineBoolean如果prompt设置为true，则multiline为true显示多行文本域，false显示单行文本域
defaultTextHeightNumber多行文本域的默认高度，默认值为75px
iconString一个样式文件，它为对话框提供一个背景图
　　Buttons配置项：
提示框按钮配置对象说明
Ext.Msg.CANCEL只显示一个“取消”按钮
Ext.Msg.NO只显示一个“否”按钮
Ext.Msg.OK只显示一个“确定”按钮
Ext.Msg.OKCANCEL显示两个按钮，“确定”和“取消”
Ext.Msg.YES只显示一个“是”按钮
Ext.Msg.YESNO显示两个按钮，“是”和“否”
Ext.Msg.YESNOCANCEL显示三个按钮，“是”、“否”和“取消”
　　图标样式说明：
样式表说明
Ext.Msg.ERROR错误图标
Ext.Msg.INFO信息图标
Ext.Msg.QUESTION问题图标
Ext.Msg.WARNING警告图标
　　调用格式：
　　show( Object config)
　　参数说明：
　　一个包含提示框配置信息的配置对象
　　返回值：
　　Ext.window.MessageBox
　　代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.MessageBox.show</title>
    <link href=http://www.mamicode.com/"ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />>
　效果图：


ext消息框


联系
我们