ExtJs: Form isValid() is false. But how to know why the form is invalid?
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.
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?
Here is my 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
Here's a much simpler solution:
form.query("field{isValid()==false}")