ExtJs:表单 isValid() 为假.但是如何知道表单无效的原因呢? [英] ExtJs: Form isValid() is false. But how to know why the form is invalid?
本文介绍了ExtJs:表单 isValid() 为假.但是如何知道表单无效的原因呢?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是 ExtJs 表单，其中包含一个文件上传字段.在选择文件时，我正在调用表单的 submit() 方法.但在提交之前，我正在使用 form.isValid() 检查表单是否有效.现在由于一些未知的原因，我得到 form.isValid() 为 FALSE.
I am using an ExtJs form having a file upload field in it.
On selecting a file I am calling the submit() method of the form.
But before submitting I am checking if the form is valid or not using form.isValid().
Now due to some unknown reasons, I am getting form.isValid() as FALSE.
但我想知道为什么表单验证失败?我将所有其他字段保留为 allowBlank: false.
But I want to know why the form validation is failing?
I have kept all other fields as allowBlank: false.
有没有办法知道(使用方法或配置属性)为什么表单验证失败以及表单中的无效字段(以及消息)是什么?
Is there a way to know (using a method or a config property) why the form validation is failing and what the invalid fields (along with messages) in the form?
这是我的代码:
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();
}
} ]
}]
});
推荐答案
您可以尝试将以下函数添加到您的表单面板定义中:
You can try adding the following function to your Form Panel definition:
getInvalidFields: function() {
var invalidFields = [];
Ext.suspendLayouts();
this.form.getFields().filterBy(function(field) {
if (field.validate()) return;
invalidFields.push(field);
});
Ext.resumeLayouts(true);
return invalidFields;
}
它将返回一个只包含那些被评估为无效的字段的数组，这里是一个工作示例.
It will return an array containing only those fields that were evaluated as invalid, here is a working example.
这篇关于ExtJs:表单 isValid() 为假.但是如何知道表单无效的原因呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
