Ext JS 4.1 MessageBox with text validation

Question

I've created a MessageBox that allow user to input some text:

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

User sees it and is allow to enter his reason, but now all I can do is verify if text he entered is not empty.

I would like to block OK button untill user enters some text (lets say minimum 20 characters)

Can I add validator to MessageBox or do I must create custom component extending window?

Answer 1

Actually it is possible, thought it might take some effort to make it work. This is a fairly "hacky" way to do this, so please use this at your own digression.

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

You can get a reference to message box after you show it. Once the text box is created and shown, the ok button is disabled, the text area is set to not allow blank values. I also attatched an event handler that checks if the text area has text in it to decide whether or not to enable or disable to the ok button.

This kind of "work around" is very susceptible to API changes, so be careful.

Answer 2

You can add the opts parameter to your fn, which represents the config of the messagebox, and reopen a messagebox if the text is empty, with the same config.

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

Answer 3

You can also enable field validation like this:

  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