extjs4 - 带有文本验证的 Ext JS 4.1 MessageBox

Question

我创建了一个允许用户输入一些文本的消息框:

Ext.MessageBox.show({
    title : 'Reason',
    msg : 'Your reson:',
    width : 300,
    buttons : Ext.MessageBox.OKCANCEL,
    multiline : true,
    scope : this,
    fn : function(btn, reason){ if (btn == 'ok' && reason != '') this.rejectPlan(rec, reason);}
});

用户看到它并允许输入他的原因，但现在我所能做的就是验证他输入的文本是否不为空。

我想阻止“确定”按钮，直到用户输入一些文本(假设至少 20 个字符)

我可以向 MessageBox 添加验证器还是必须创建扩展窗口的自定义组件？

Answer 1

其实这是可能的，我想可能需要一些努力才能实现。这是一种相当“hacky”的方法，所以请在你自己的题外话中使用它。

    var messageBox = Ext.MessageBox.show({
            title: 'Type Something in!',
            msg: 'Please type something into the text box!',
            width: 300,
            buttons: Ext.MessageBox.OKCANCEL,
            multiline: true,
            fn: function(btn, text, config) {
                //Do your thing
            },
    });

    messageBox.msgButtons.ok.setDisabled(true);
    messageBox.textArea.allowBlank = false;
    messageBox.textArea.on('change', function (e, text, o) {
        if (text.length > 0) {
            messageBox.msgButtons.ok.setDisabled(false);
        } else {
            messageBox.msgButtons.ok.setDisabled(true);
        }
    });

显示消息框后，您可以获得对消息框的引用。创建并显示文本框后，确定按钮将被禁用，文本区域将设置为不允许空白值。我还附加了一个事件处理程序，用于检查文本区域中是否有文本，以决定是否启用或禁用“确定”按钮。

这种“变通办法”很容易受到 API 更改的影响，所以要小心。