javascript - ExtJs:表单 isValid() 为假。但是如何知道表单无效的原因呢？

Question

我正在使用其中包含文件上传字段的 ExtJs 表单。在选择一个文件时，我调用了表单的 submit() 方法。但在提交之前，我使用 form.isValid() 检查表单是否有效。现在由于一些未知原因，我将 form.isValid() 设置为 FALSE。

但我想知道为什么表单验证失败？我将所有其他字段保留为 allowBlank: false。

有没有办法知道(使用方法或配置属性)表单验证失败的原因以及表单中的无效字段(以及消息)是什么？

这是我的代码:

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

这里有一个更简单的解决方案:

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