Extjs validate Panel in Window

Question

Available: Ext.form.Panel:

this.myForm = Ext.create("Ext.form.Panel", {
            items : [{
                xtype : 'textfield',
                name : 'val1',
                fieldLabel : 'val1',
                            allowBlank: false,
                validator : function(value) { // validate val1
                    if (!(/^[a-zA-Z]+[\w]*$/.test(value)))
                        return "val1 is not valid";
                    return true;
                }
            }, {
                xtype : 'textfield',
                name : 'code',
                fieldLabel : 'val2',
                allowBlank: false,
                validator : function(value) { // validate val2
                    if (!(/^[a-zA-Z]+[\w]*$/.test(value)))
                        return "val2 is not valid";
                    return true;
                }
            }]
        });

then transmits it to the Window:

Ext.window.Window:

this.someWindow = Ext.create("Ext.window.Window", {
          items : [me.myForm, me.anotherPanel],
          title : 'test',
          closeAction : 'hide',
          buttons : [{
              text : 'Save',
              handler : function() { // some actions
                                }

How can I validate val1 and val2 in myForm from someWindow on action: save?

Answer 1

this will call the validator functions

handler: function(button) {
     var valid = button.up('window').down('form').getForm().isValid();
     if(valid) {
         ...
     }
}

EDIT:

Or you move the save button into the form buttons config and add the option formBind: true to the button. this will disable the button as long as the form is invalid.

Answer 2

Those validator functions will validate the values as the user types, so those are sufficient for client-side validation. However, you will also want to have server-side validation of these values, since javascript can easily be modified client-side by a user who knows what they're doing.