Ext.MessageBox 是 Ext JS 框架中的一个类，用于在网页上弹出消息框，通常用于提示信息、警告、确认或错误消息。它提供了不同类型的消息框，如“确认框”、“信息框”和“错误框”，并且可以自定义按钮、内容和样式。

Ext.MessageBox 的常见用法

在 Ext JS 中，Ext.MessageBox 提供了很多功能，比如显示信息、警告、确认框、输入框等，下面将介绍它的一些常见用法。

1. 显示基本的消息框

消息框有不同的类型，比如 alert、confirm 和 prompt，你可以通过设置 type 来定义消息框的样式。

显示信息框 (alert)

Ext.MessageBox.alert('提示', '操作成功！');
  • alert 用于展示一个简单的消息框，通常用于向用户提供信息。

显示确认框 (confirm)

Ext.MessageBox.confirm('确认', '确定要删除吗？', function(btn) {
    if (btn === 'yes') {
        // 执行删除操作
        console.log('已确认删除');
    } else {
        // 取消操作
        console.log('已取消删除');
    }
});
  • confirm 用于向用户询问确认信息，常用于操作前的确认步骤，返回结果通过回调函数中的 btn 参数来获取（yes 或 no）。

显示输入框 (prompt)

Ext.MessageBox.prompt('请输入用户名', '请输入您的用户名：', function(btn, text) {
    if (btn === 'ok') {
        console.log('输入的用户名是：' + text);
    } else {
        console.log('操作取消');
    }
});
  • prompt 用于让用户输入信息，用户输入的内容会作为回调函数的第二个参数返回。

2. 自定义消息框

你可以进一步自定义消息框的按钮、图标、标题等。

自定义按钮和图标

Ext.MessageBox.show({
    title: '自定义消息框',
    msg: '您确定要继续吗？',
    buttons: Ext.MessageBox.YESNO,  // 自定义按钮
    icon: Ext.MessageBox.QUESTION,  // 设置图标
    fn: function(btn) {
        if (btn === 'yes') {
            console.log('确认继续');
        } else {
            console.log('取消');
        }
    }
});
  • buttons：可以指定消息框的按钮，Ext.MessageBox.YESNO 表示有“是”和“否”按钮。
  • icon：设置消息框的图标，可以选择 Ext.MessageBox.QUESTION, Ext.MessageBox.WARNING, Ext.MessageBox.INFO 等。

3. 使用进度条

Ext.MessageBox 还支持显示进度条，可以在长时间运行的任务中使用。

var msgBox = Ext.MessageBox.show({
    title: '操作进行中',
    msg: '正在处理，请稍候...',
    progress: true,
    width: 300,
    closable: false
});

// 模拟进度更新
var i = 0;
var interval = setInterval(function() {
    i += 10;
    msgBox.updateProgress(i / 100, '正在处理... ' + i + '%');
    if (i === 100) {
        clearInterval(interval);
        msgBox.close();
    }
}, 500);
  • progress: true：启用进度条。
  • updateProgress：更新进度条的进度。
  • closable: false：防止用户在进度未完成时关闭消息框。

4. 自定义布局和内容

你可以通过 Ext.MessageBox 来显示复杂的 HTML 内容，或者通过自定义布局显示消息框。

Ext.MessageBox.show({
    title: 'HTML 内容',
    msg: '这是 <b>加粗</b> 的文本和 <i>斜体</i> 的文本。',
    buttons: Ext.MessageBox.OK,
    icon: Ext.MessageBox.INFO,
    width: 400,
    height: 200
});
  • msg：支持 HTML 标签，可以直接在消息框中显示 HTML 格式的内容。

5. 其他类型的消息框

  • INFO：用于信息提示。
  • WARNING：用于警告提示。
  • ERROR：用于错误提示。
  • QUESTION：用于询问问题。
Ext.MessageBox.show({
    title: '警告',
    msg: '系统出现问题，请稍后再试。',
    buttons: Ext.MessageBox.OK,
    icon: Ext.MessageBox.WARNING
});

6. MessageBox 的方法

  • Ext.MessageBox.show(config)：显示自定义的消息框，可以传入配置对象。
  • Ext.MessageBox.alert(title, msg)：显示一个简单的 alert 消息框。
  • Ext.MessageBox.confirm(title, msg, fn)：显示一个确认框，fn 是回调函数。
  • Ext.MessageBox.prompt(title, msg, fn)：显示一个输入框，fn 是回调函数。
  • Ext.MessageBox.progress(title, msg)：显示一个进度条。
  • Ext.MessageBox.updateProgress(progress, msg)：更新进度条。

总结

Ext.MessageBox 是一个非常强大的消息框工具，能够帮助你在 Ext JS 应用程序中向用户提供提示、确认、输入等交互功能。你可以根据需求自定义消息框的按钮、图标、内容以及布局等。