ExtJS 6.0.0（Classic）如何为MessageBox添加自定义表单？

嘿，刚好碰到过类似的需求！基础的Ext.MessageBox确实只能应付简单提示场景，要实现带自定义表单的模态对话框，直接用Ext.window.Window搭配表单面板才是正道，我给你捋个清晰的实现方案：

核心思路 #

放弃受限于预设内容的Ext.MessageBox，直接用Ext.window.Window作为模态容器，内部嵌入完全自定义的Ext.form.Panel——这样你想加多少切换按钮、文本域甚至其他复杂组件都没问题。

完整代码示例 #

1. 先定义自定义表单 #

把你需要的三个切换按钮组、文本域都塞进表单里：

// 创建包含切换按钮组和文本域的自定义表单
const customForm = Ext.create('Ext.form.Panel', {
    bodyPadding: 12,
    items: [
        // 三个切换按钮组成的按钮组
        {
            xtype: 'buttongroup',
            title: '选择分类',
            columns: 3,
            items: [
                {
                    text: '分类A',
                    toggleGroup: 'categoryGroup',
                    pressed: true, // 默认选中第一个
                    tooltip: '选择分类A'
                },
                {
                    text: '分类B',
                    toggleGroup: 'categoryGroup',
                    tooltip: '选择分类B'
                },
                {
                    text: '分类C',
                    toggleGroup: 'categoryGroup',
                    tooltip: '选择分类C'
                }
            ]
        },
        // 文本域
        {
            xtype: 'textfield',
            fieldLabel: '详细描述',
            name: 'description',
            allowBlank: false, // 设置为必填项
            emptyText: '请输入详细内容',
            margin: '10 0 0 0'
        }
    ]
});

2. 包装成模态对话框 #

把表单放进窗口，设置模态属性、确定/取消按钮，以及后续逻辑：

// 创建模态对话框窗口
const modalDialog = Ext.create('Ext.window.Window', {
    title: '录入数据',
    modal: true, // 关键：设置为模态，用户必须处理完才能操作其他内容
    width: 420,
    layout: 'fit', // 让表单铺满窗口
    items: customForm,
    buttons: [
        {
            text: '确定',
            handler: function() {
                // 先验证表单是否合法
                if (customForm.isValid()) {
                    // 获取用户录入的所有数据
                    const formData = customForm.getForm().getValues();
                    // 这里写你后续的流程逻辑，比如提交到后台、触发下一步操作
                    console.log('用户提交的数据：', formData);
                    
                    // 验证通过后关闭对话框
                    modalDialog.close();
                } else {
                    Ext.Msg.alert('提示', '请完善必填内容哦');
                }
            }
        },
        {
            text: '取消',
            handler: function() {
                modalDialog.close();
            }
        }
    ]
});

// 显示对话框
modalDialog.show();

额外提示 #

• 如果需要更复杂的表单逻辑（比如动态显示/隐藏字段、字段联动），直接在customForm里扩展就行，完全不受限制
• 切换按钮组也可以换成Ext.form.RadioGroup，根据你的UI需求选择就行
• 要是需要复用这个对话框，可以把它封装成一个自定义组件，方便在项目里多次调用

内容的提问来源于stack exchange，提问作者Dirk Schumacher