如何在ExtJS的Ext.msg.confirm中添加HTML？消息无法显示

看起来你遇到的核心问题是长文本消息导致弹窗布局异常，同时想在确认框中用HTML优化内容展示。其实Ext.MessageBox默认支持HTML内容，只要合理构造消息结构、处理长文本的显示逻辑就能解决，下面给你具体的解决方案：

解决思路 #

• 显式开启HTML解析：虽然多数ExtJS版本默认允许msg参数包含HTML，但显式设置html: true可以避免版本兼容问题；
• 控制长文本布局：用带滚动条的容器包裹冗长的名称列表，防止弹窗被过度撑开，提升用户体验；
• 结构化内容：把杂乱的名称列表转成更易读的HTML结构（比如分段、列表项）。

具体代码示例 #

方法1：用数组维护名称，生成滚动列表 #

这种方式更易维护，适合名称需要动态生成的场景：

// 把所有名称放在数组里，方便后续修改维护
var selectedNames = [
    "abcd11",
    "abcdefg_test_maxim_char0",
    "abcdefg_test_maxim_char1",
    // ... 这里省略其他名称，保留你原有的所有项
    "abcdefg_test_maxim_char400"
];

// 生成带滚动条的HTML列表容器
var namesHtml = '<div style="max-height: 220px; overflow-y: auto; padding: 8px; border: 1px solid #eee; border-radius: 4px;">' +
    selectedNames.map(name => `<div style="margin: 4px 0;">${name}</div>`).join('') +
'</div>';

// 构造最终的确认消息
var messageVal = `Are you sure you want to permanently delete the selected Names: ${namesHtml}`;

// 调用确认弹窗
Ext.MessageBox.confirm({
    title: 'Delete Names',
    msg: messageVal,
    buttons: Ext.Msg.YESNO,
    html: true // 显式开启HTML解析，确保内容被正确渲染
});

方法2：直接处理原字符串 #

如果你已经有现成的逗号分隔名称字符串，可以直接拆分后格式化：

// 你的原名称字符串（完整列表）
var originalNamesStr = 'abcd11, abcdefg_test_maxim_char0, abcdefg_test_maxim_char1, ...';

// 拆分字符串并生成带滚动的HTML容器
var namesHtml = '<div style="max-height: 220px; overflow-y: auto; padding: 8px;">' +
    originalNamesStr.split(', ').map(name => `<p style="margin: 3px 0;">${name}</p>`).join('') +
'</div>';

var messageVal = `Are you sure you want to permanently delete the selected Names: ${namesHtml}`;

Ext.MessageBox.confirm({
    title: 'Delete Names',
    msg: messageVal,
    buttons: Ext.Msg.YESNO,
    html: true
});

为什么之前的代码有问题？ #

你之前直接把超长的纯文本塞到msg参数里，没有任何换行或容器限制，ExtJS渲染时要么把所有内容挤在一行，要么自动换行但过度撑大弹窗，导致布局错乱。通过HTML容器添加滚动条，既能完整展示所有内容，又能保持弹窗的合理尺寸。

内容的提问来源于stack exchange，提问作者Patrick Paul