Extjs4 带文本验证的Ext JS 4.1 MessageBox

我创建了一个MessageBox，允许用户输入一些文本：

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);}
});

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

我想阻止OK按钮，直到用户输入一些文本（比如至少20个字符）

---

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

您可以将opts参数添加到fn，它表示MessageBox的配置，如果文本为空，则使用相同的配置重新打开MessageBox

Ext.MessageBox.show({
    title : 'Reason',
    msg : 'Your reason:',
    width : 300,
    buttons : Ext.MessageBox.OKCANCEL,
    multiline : true,
    scope : this,
    fn : function(btn, reason, cfg){ 
         if (btn == 'ok' && Ext.isEmpty(reason)) { 
            //if you want to mark the text as mandatory

            Ext.MessageBox.show(Ext.apply({}, {msg:cfg.msg}, cfg));  
         } else if (btn =='ok') {
            alert('ok with text');                 
         }
    }
});
​

---

事实上，这是可能的，尽管它可能需要一些努力才能使其发挥作用。这是一个相当“黑客”的方式来做这件事，所以请使用这个在您自己的题外话

    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);
        }
    });

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

---

这种“变通方法”非常容易受到API更改的影响，因此请小心。

您也可以像这样启用字段验证：

  var promptWindow = Ext.Msg.prompt( 'Reason', 'Please enter a reason of reverse:', function( btn, text, cfg ) {
        if( btn === 'ok' && text.length > 128){
            //display warning

            cfg.value = text;
            Ext.MessageBox.prompt( Ext.apply( {}, { msg: cfg.msg }, cfg ) );
        }
        else if ( btn === 'ok' ) {
            //do something on success
        }
    }, this, true );
    promptWindow.textArea.maxLength = 128; //if multiline is enabled
//promptWindow.textField.maxLength = 128; //if multiline is disabled

---

这是一个选项：）但我可以在开始时禁用按钮，然后在输入测试后启用它吗？对于MessageBox，我认为这将是一个问题。是的，如果我必须这样做，我只需要创建自己的窗口组件，看起来相当容易。MessageBox不允许很多变化，特别是Ext.MessageBox.show，它对所需的配置要求更严格。我已经有一段时间没有使用ExtjS了，但我肯定会尝试使用它。谢谢你挖出这个老问题：）