首页 > 代码库 > ExtJs弹出窗口

ExtJs弹出窗口

2024-08-29 19:13:00   223人阅读

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 + "<br> 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(‘编辑文件后选“是”则提交修改，选“否”则放弃修改<br/><br/>‘), 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.QUESTION
6 });
 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<br> 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 }

 

ExtJs弹出窗口


联系
我们