如何为Ext.Msg添加「不再询问」复选框以避免重复确认操作

这事儿好办！Ext.Msg本身就内置了复选框的配置项，刚好能满足你这个需求，我给你一步步拆解实现：

核心思路 #

1. 利用Ext.Msg的checkbox配置开启复选框，用checkboxText设置你要的文本"don't ask anymore"
2. 在确认回调里获取复选框的选中状态，把这个状态存入本地存储（比如localStorage），这样刷新页面后设置依然有效
3. 后续触发操作时，先检查本地存储的状态，如果用户已经勾选了「不再询问」，就直接执行发送逻辑，不再弹出确认框

完整代码示例 #

// 封装复用的确认发送函数
function confirmSendMessage() {
    // 读取本地存储的「不再询问」设置
    const shouldSkipConfirm = localStorage.getItem('skipSendConfirm') === 'true';

    if (shouldSkipConfirm) {
        // 用户已勾选不再询问，直接执行发送逻辑
        executeSend();
        return;
    }

    // 未勾选则弹出确认框
    Ext.Msg.show({ 
        title: 'Send Message', 
        message: 'Are you sure you want to send the message?',
        buttons: Ext.Msg.YESNO, 
        checkbox: true, // 开启复选框组件
        checkboxText: "don't ask anymore", // 设置复选框显示文本
        fn: function(btnId, _, opts) { 
            if (btnId === 'yes') {
                executeSend();
                // 如果复选框被选中，保存状态到本地存储
                if (opts.checkboxChecked) {
                    localStorage.setItem('skipSendConfirm', 'true');
                }
            }
            // 点击「no」的话不做存储操作，下次依然会弹出确认框
        } 
    });
}

// 实际的发送消息逻辑
function executeSend() {
    // 这里替换成你的发送代码
    console.log('Message sent successfully!');
}

细节说明 #

• checkbox: true是开启复选框的关键配置，没有这个的话复选框不会显示
• 回调函数的第三个参数opts里包含了checkboxChecked属性，用来判断用户是否勾选了复选框
• 用localStorage存储状态是因为它持久化存储在浏览器中，除非用户手动清除缓存或者你代码里主动删除，否则设置会一直生效
• 如果你需要提供重置「不再询问」的功能，可以加个按钮执行localStorage.removeItem('skipSendConfirm')即可

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