Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ext JS 4.1 MessageBox with text validation

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?

like image 384
Misiu Avatar asked Feb 19 '23 23:02

Misiu


1 Answers

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.

like image 185
Serguei Fedorov Avatar answered Mar 16 '23 09:03

Serguei Fedorov