Extjs验证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.