ExtJs: Formular isValid() ist false. Aber wie kann ich wissen, warum das Formular ungültig ist?

Question

Ich verwende ein ExtJs-Formular mit einem Datei-Upload-Feld darin. Beim Auswählen einer Datei rufe ich die Methode submit() des Formulars auf. Aber bevor ich sende, überprüfe ich, ob das Formular gültig ist oder nicht form.isValid() verwendet. Jetzt aus einigen unbekannten Gründen bekomme ich form.isValid() als FALSE.

Aber ich möchte wissen, warum die Formularvalidierung fehlschlägt? Ich habe alle anderen Felder als allowBlank: false behalten.

Gibt es eine Möglichkeit zu wissen (mit einer Methode oder einer Config-Eigenschaft), warum die Formularvalidierung fehlschlägt und welche ungültigen Felder (zusammen mit Nachrichten) im Formular?

Hier ist mein Code:

var simple = Ext.create('Ext.form.Panel', { 
    id : 'textIntConfigPanel', 
    frame : true, 
    bodyPadding : 1, 
    width : '100%', 
    layout : 'anchor', 
    fileUpload: true, 
    items :[{ 
     xtype : 'panel', 
     layout : 'column', 
     fieldDefaults : { 
      labelAlign : 'center', 
      msgTarget : 'side' 
     }, 
     items : [{ 
      xtype: 'fieldset', 
      columnWidth:0.5, 
      border: false, 
      items:[{ 
       xtype : 'fieldset', 
       title: 'Configuration', 
       flex : 1, 
       defaultType : 'textfield', 
       items : [{ 
        xtype : 'radiogroup', 
        fieldLabel : 'Configuration', 
        id:'rdType', 
        columns : 2, 
        defaults : { 
         name : 'rdType' 
        }, 
        items : [{ 
           inputValue : '0', 
           boxLabel : 'Existing', 
           checked : true 
          },{ 
           inputValue : '1', 
           boxLabel : 'New' 
          }] 
       },{ 
        xtype: 'container', 
        layout: 'hbox', 
        padding: '0 5 0 0', 
        items: [{ 
         xtype: 'textfield', 
         fieldLabel : 'Configuration Name', 
         name : 'txtConfigName', 
         id:'txtConfigName', 
         padding: '0 5 0 0', 
         hidden:true, 
         disabled:true 
        },{ 
         xtype : 'image', 
         padding: '0 5 0 0', 
         hidden:true, 
         id:'nameConfirmation' 
        }] 
       },{ 
        name : 'txtOldConfigTable', 
        id:'txtOldConfigTable', 
        hidden:true 
       },{ 
        xtype : 'combobox', 
        fieldLabel : 'Configuration Name', 
        name : 'cmbConfigName', 
        id:'cmbConfigName', 
        editable:false, 
        valueField : 'configId', 
        displayField : 'configName', 
        emptyText : 'Select Configuration...', 
        store : configNameStore 
       },{ 
         xtype : 'radiogroup', 
         fieldLabel : 'If Data Exists', 
         id:'ifExists', 
         columns : 2, 
         defaults : { 
          name : 'ifExists' 
         }, 
         items : [{ 
            inputValue : 0, 
            boxLabel : 'Update & Insert', 
            checked : true 
           },{ 
            inputValue : 1, 
            boxLabel : 'Insert Only New' 
           }] 
        },{ 
         xtype : 'radiogroup', 
         fieldLabel : 'Location', 
         id:'rdoLoc', 
         columns : 3, 
         defaults : { 
          name : 'rdoLoc' 
         }, 
         items : [{ 
            inputValue : '0', 
            boxLabel : 'Local', 
            checked : true 
           },{ 
            inputValue : '1', 
            boxLabel : 'HTTP' 
           },{ 
            inputValue : '2', 
            boxLabel : 'FTP' 
           }] 
        },{ 
         fieldLabel : 'File Location', 
         name : 'txtFileLoc', 
         disabled:true, 
         hidden:true, 
         id:'txtFileLoc' 
        },{ 
         fieldLabel : 'User Name', 
         name : 'txtUserName', 
         disabled:true, 
         hidden:true, 
         id:'txtUserName' 
        },{ 
         fieldLabel : 'Password', 
         name : 'txtPassword', 
         inputType :'password', 
         disabled:true, 
         hidden:true, 
         id:'txtPassword' 
        }] 
      },{ 
       xtype : 'fieldset', 
       title: 'Scheduling', 
       flex : 1, 
       defaultType : 'textfield', 
       layout : 'vbox', 
       items:[{ 
        xtype : 'fieldset', 
        flex : 1, 
        border:false, 
        padding :0, 
        margin:0, 
        defaultType : 'textfield', 
        width : '100%', 
        layout : 'hbox', 
        items:[{ 
         xtype : 'fieldset', 
         flex : 1, 
         border:false, 
         padding :0, 
         margin:0, 
         defaultType : 'textfield', 
         width : 50, 
         layout : 'anchor', 
         items:[{ 
          xtype : 'combobox', 
          fieldLabel : 'Repeat Type', 
          name : 'cmbRptType', 
          id:'cmbRptType', 
          editable:false, 
          labelWidth : 90, 
          width : 180, 
          store:[['0','Never'],['1','Hourly'],['2','Daily'],['1','Monthly']], 
          displayField: 'val', 
          valueField: 'key', 
          emptyText : 'Select RepeatType...' 
         },{ 
          xtype : 'textfield', 
          fieldLabel : 'Repeat Interval', 
          name : 'txtRptInc', 
          labelWidth : 90, 
          width : 150, 
          id:'txtRptInc', 
          regex: /^[1]?[0-9]{0,1}$/, 
          regexText: "<b>Error</b></br>Increment Must be Integer" 
         }] 
        },{ 
         xtype : 'fieldset', 
         border:false, 
         padding :'0 0 8 0', 
         margin:0, 
         flex : 1, 
         defaultType : 'textfield', 
         width : 20, 
         layout : 'anchor', 
         defaults : { 
          anchor : '100%', 
          hideEmptyLabel : false 
         }, 
         items:[Ext.create('Ext.ux.form.DateTimeField', { 
          xtype : 'textfield', 
          name : 'exeStartDateTime', 
          id : 'exeDateTime', 
          labelWidth : 100, 
          width : 35, 
          fieldLabel : 'Start Date Time' 
         }) 
         ,Ext.create('Ext.ux.form.DateTimeField', { 
          xtype : 'textfield', 
          name : 'exeEndDateTime', 
          id : 'exeEndDateTime', 
          labelWidth : 100, 
          width : 35, 
          fieldLabel : 'End Date Time' 
         })] 
        }] 
       }] 
      }] 
     },{ 
      xtype : 'fieldset', 
      title: 'Data Preparation', 
      flex : 1, 
      defaultType : 'textfield', 
      columnWidth: 0.5, 
      width : '100%', 
      layout : 'vbox', 
      items:[{ 
       xtype : 'fieldset', 
       flex : 1, 
       border:false, 
       padding :0, 
       margin:0, 
       defaultType : 'textfield', 
       width : '100%', 
       layout : 'hbox', 
       items:[{ 
        xtype : 'fieldset', 
        flex : 1, 
        border:false, 
        padding :0, 
        margin:0, 
        defaultType : 'textfield', 
        layout : 'anchor', 
        items:[{ 
         fieldLabel : 'File Name Pattern', 
         name : 'txtfileNamePatern', 
         id:'txtfileNamePatern', 
         value: '*.*' 
        },{ 
         xtype: 'container', 
         layout: 'hbox', 
         items: [{ 
          xtype: 'filefield', 
          name : 'fileUploadBox', 
          id:'fileUpload', 
          vtype : 'file', 
          width: 250, 
          fieldLabel : 'Upload File', 
          buttonText: 'Browse', 
          listeners : { 
           change : function(s, v, o) { 
            fileName = v; 
            var form = this.up('form'); 
            debugger; 
            form.submit({ 
             url : 'textFileIntegrationConfig_!readFile?fileName=' + fileName, 
             data : { 
              fileName : fileName 
             }, 
             success : function(fp, o) { 
              debugger; 
              var response = JSON.parse(o.response.responseText); 
             }, 
             failure : function(fp, o) { 
              debugger; 
              var response = JSON.parse(o.response.responseText);            
             } 
            }); 
           } 
          } 
         },{ 
          xtype : 'image', 
          hidden:true, 
          id:'uploadConfirmation' 
         }]      
        }] 
       },{ 
        xtype : 'fieldset', 
        border:false, 
        padding :'0 0 8 0', 
        margin:0, 
        flex : 1, 
        defaultType : 'textfield', 
        width : 300, 
        layout : 'anchor', 
        defaults : { 
         anchor : '100%', 
         hideEmptyLabel : false 
        }, 
        items:[{ 
         xtype: 'container', 
         layout: 'hbox', 
         items: [{ 
          xtype : 'combobox', 
          fieldLabel : 'Data Delimiter', 
          name : 'cmbFieldDelim', 
          id:'cmbFieldDelim', 
          margin: '5 5 5 0', 
          editable:false, 
          width: 200, 
          store:[["\\t",'Tab'],["\\n",'New Line'],['99','Other']], 
          displayField: 'val', 
          valueField: 'key' 
         },{ 
          xtype: 'textfield', 
          name : 'txtFieldDelim', 
          id : 'txtFieldDelim', 
          enforceMaxLength: false, 
          hidden: true, 
          margin: '5 0 0 0', 
          maxLength: 2, 
          width: 50, 
          validateOnChange : true, 
          validator: function(v) { 
           var txtFieldDelim = Ext.ComponentQuery.query("textfield[name='txtRecordDelim']")[0]; 
           if (v == txtFieldDelim.value) { 
            return "Both Delimiter can't be same"; 
           } 
           return true; 
          } 
         }]      
        },{ 
         xtype: 'container', 
         layout: 'hbox', 
         items: [{ 
          xtype : 'combobox', 
          fieldLabel : 'Row Delimiter', 
          name : 'cmbRecordDelim', 
          id:'cmbRecordDelim', 
          editable:false, 
          margin: '0 5 5 0', 
          width: 200, 
          store:[['\\r','Tab'],['\\n','New Line'],['99','Other']], 
          displayField: 'val', 
          valueField: 'key' 
         },{ 
          xtype: 'textfield', 
          name : 'txtRecordDelim', 
          id : 'txtRecordDelim', 
          enforceMaxLength: false, 
          hidden: true, 
          maxLength: 2, 
          width: 50, 
          validateOnChange : true, 
          validator: function(v) { 
           var txtFieldDelim=Ext.ComponentQuery.query("textfield[name='txtFieldDelim']")[0]; 
           if(v==txtFieldDelim.value){ 
            return "Both Delimiter can't be same"; 
           } 
           return true; 
          } 
         }]      
        }] 
       }] 
      },{ 
       xtype : 'gridpanel', 
       flex : 1, 
       autoSync:false, 
       autoScroll:true, 
       id: 'configGrid', 
       width : '100%', 
       height:180, 
       columns: [{ 
        xtype: 'gridcolumn', 
        flex: 0.33, 
        text: 'File Header Name', 
        sortable: false, 
        menuDisabled: true, 
        dataIndex: 'header'      
       },{ 
        text: 'Field Type', 
        flex: 0.33, 
        menuDisabled: true, 
        dataIndex: 'dataType' 
       },{ 
        text: 'Table Field Name', 
        flex: 0.33, 
        menuDisabled: true, 
        dataIndex: 'finalFieldName', 
        editor: 'textfield' 
       }], 
       store : gridStore, 
       plugins: [Ext.create('Ext.grid.plugin.CellEditing', { 
        clicksToEdit: 1 
       })] 
      }]   
     }], 
     tbar: ['->', { 
      text : 'Save', 
      icon: "images/icon-save.gif", 
      handler : function() { 
       var form=this.up('form'); 
       formAllowBlank(false); 
       if (form.getForm().isValid()) { 
        Ext.MessageBox.show({ 
         msg : 'Saving data, please wait...', 
         progressText : 'Saving...', 
         width : 300, 
         wait : true, 
         waitConfig : { 
          interval : 200 
         } 
        }); 
        saveData(form); 
       } 

      } 
     },{ 
      text : 'Test & Run Now', 
      id: 'Integration.TestBtn', 
      icon: "images/run.png", 
      handler : function() { 
       var form=this.up('form'); 
       TestData(form);      
      } 
     }, { 
      text : 'Reset', 
      icon: "images/cross.png", 
      handler : function() { 
       resetData(); 
      } 
     } ]   
    }] 
}); 

Answer 1

Sie können versuchen, die folgende Funktion, um Ihre Formularfeld Definition hinzufügen:

getInvalidFields: function() { 
    var invalidFields = []; 
    Ext.suspendLayouts(); 
    this.form.getFields().filterBy(function(field) { 
     if (field.validate()) return; 
     invalidFields.push(field); 
    }); 
    Ext.resumeLayouts(true); 
    return invalidFields; 
} 

Es wird ein Array zurück nur die Felder enthält, die als ungültig bewertet , here is a working example.

Answer 2

Hier ist eine viel einfachere Lösung:

form.query("field{isValid()==false}")