Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'firstName',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'lastName',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: false, //only enabled once the form is valid
disabled: false,
handler: function() {
var panel = this.up('form');
var form = panel.getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
} else {
fieldNames = [];
fields = panel.getInvalidFields();
for(var i=0; i < fields.length; i++){
field = fields[i];
fieldNames.push(field.getName());
}
console.debug(fieldNames);
Ext.MessageBox.alert('Invalid Fields', 'The following fields are invalid: ' + fieldNames.join(', '));
}
}
}],
getInvalidFields: function() {
var invalidFields = [];
Ext.suspendLayouts();
this.form.getFields().filterBy(function(field) {
if (field.validate()) return;
invalidFields.push(field);
});
Ext.resumeLayouts(true);
return invalidFields;
},
renderTo: Ext.getBody()
});