extjs 关闭弹出窗口_ExtJs弹出窗口

1、Ext.Msg.alert(String title, String msg, [Function fn], [Object scope])

显示一个标准的带有一个“确定”按钮的只读消息框(类似于基本的JavaScript警告提示)。

参数：

title : 标题

msg : 提示消息

fn : 消息框关闭后调用的回调函数

scope : 回调函数被执行的范围(this 引用，默认指向window)

eg:

1 Ext.Msg.alert("提示", "没有可归档的文件");2 Ext.Msg.alert("提示", "没有可归档的文件", function() {3 alert("提示框关闭");4 });

2、Ext.Msg.prompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] )

显示一个带有“确定”和“取消”按钮，提供用户输入一些文本的消息框(类似于JavaScript的提示)，可以是一个单行或者多行的文本框。

参数：

title : 标题

msg : 提示消息

fn : 消息框关闭后调用的回调函数

scope : 回调函数被执行的范围(this 引用，默认指向window)

multiline : 为真时使用defaultTextHeight属性创建一个多行文本框，或者以px为高度单位的文本框，默认为false

value : 文本输入元素的默认值，默认为""

eg:

1 Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text) {2 if (btn == 'ok') {3 Ext.Msg.alert("Result", "button: " + btn + "
input: " +text);4 }5 }, this, 150, 'wuln');

3、Ext.Msg.confirm( String title, String msg, [Function fn], [Object scope] )

显示一个带有“YES”和“NO”按钮的确认消息框(类似于JavaScript的确认)。

参数：

title : 标题

msg : 提示消息

fn : 消息框关闭后调用的回调函数

scope : 回调函数被执行的范围(this 引用，默认指向window)

eg:

1 Ext.Msg.confirm("是否保存", String.format('编辑文件后选“是”则提交修改，选“否”则放弃修改
'), function(e) {2 if (e == "yes") {3 Ext.Msg.alert("提示", "文件保存成功！");4 }5 }, this);

4、Ext.Msg.show( Object config )

显示一个新的消息框，或者基于配置项重新初始化一个已存在的消息框。

常用配置项：

animEl: 动画

buttons : 按钮，取值如下

Ext.Msg.OK

Ext.Msg.YES

Ext.Msg.NO

Ext.Msg.CANCEL

title : 标题

msg : 提示消息

fn : 消息框关闭后调用的回调函数

scope : 回调函数被执行的范围(this 引用，默认指向window)

width:消息框的宽度，px为单位

multiline: 是否显示多行文本

closable:是否显示关闭按钮

icon:图标，取值如下

Ext.MessageBox.INFO

Ext.MessageBox.WARNING

Ext.MessageBox.QUESTION

Ext.MessageBox.ERROR

maxWidth : 最大宽度(px：默认600)

minWidth : 最小宽度(px：默认100)

modal : 是否模态显示

progress : 是否显示进度条

progressText : 进度为真时，显示在进度条内部的文本

eg:

1 Ext.Msg.show({2 title: 'Save Changes?',3 msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',4 buttons: Ext.Msg.YESNOCANCEL,5 icon: Ext.MessageBox.QUESTION6 });

1 Ext.Msg.show({2 title: "提示",3 msg: "请输入：",4 width: 400,5 multiline: true,6 closable: false,7 buttons: Ext.MessageBox.OK,8 icon: Ext.MessageBox.INFO,9 fn: function(btn, text) {10 Ext.Msg.alert("Result", String.format("btn : OK
input: " +text));11 }12 });

1 Ext.Msg.show({2 title: '请稍后',3 msg: '正在导出...',4 progressText: '正在初始化...',5 width: 400,6 progress: true,7 closable: false

8 });9 var progress = function(w) {10 return function() {11 if (w == 12) {12 Ext.Msg.hide();13 Ext.Msg.alert('完成', '导出成功!');14 } else{15 var e = w / 11;16 Ext.Msg.updateProgress(e, Math.round(100 * e) + '%');17 }18 };19 };20 for (var i = 0; i < 13; i++) {21 setTimeout(progress(i), i * 500);22 }

1 Ext.MessageBox.show({2 title: "提示",3 msg: '图片上传中,请稍候....',4 progressText: 'Saving...',5 width: 355,6 wait: true,7 waitConfig: { interval: 200},8 icon: 'ext-mb-download', //custom class in msg-box.html

9 animateTarget: 'mb7'

10 });11 setTimeout(function() {12 Ext.MessageBox.hide();13 }, 2000);