Search code examples
javascriptextjsextjs4panel

Extjs validate Panel in Window


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?


Solution

  • 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.