I am trying to bind my class fields with my view fields using Extjs4. I have done to an extent where I can submit the form and get a result back but not sure how to display any error message next to respective fields if it fails validation. I would like to bind these fields directly to my class (like we do for spring mvc eg - bindingResults.rejectValue("currentPassword", "currentPassword.incorrect", "Password is incorrect"); and it gets displayed in the view).
My formPanel:
{
xtype : 'formpanel',
url: 'changePassword',
id : 'changePasswordForm',
method: 'POST',
success: function(){},
items : [{
xtype : 'fieldset',
id : 'passwordChange',
title : 'Change Password',
iconCls : 'user',
items : [{
xtype : 'passwordfield',
label : 'Current Password',
name : 'currentPassword',
id : 'currentPassword',
}, {
xtype : 'passwordfield',
label : 'New Password'
name : 'newPassword1',
id : 'newPassword1',
}, {
xtype : 'passwordfield',
label : 'Repeat Password',
name : 'newPassword2',
id : 'newPassword2',
},]
} ]
},{
xtype : 'button',
id: 'changePassword',
}
The controller that does the submit event on button click -
this.getChangePasswordForm().submit();
And my class is
@RequestMapping(value = "/changePassword", method = RequestMethod.POST)
public @ResponseBody String changePasswordInSettings(ChangePasswordForm changePasswordForm) {
User currentUser = User.find();
String enteredPSHash = HashUtil
.generateHash(changePasswordForm.getCurrentPassword(),
currentUser.getEmail());
String existingPSHash = currentUser.getPassword();
if(!enteredPSHash.equals(existingPSHash)) {
//bindingResults.rejectValue("currentPassword",
//"currentPassword.incorrect", "Password is incorrect");
}
if (!changePasswordForm.getNewPassword1().equals(changePasswordForm.getNewPassword2())) {
//bindingResults.rejectValue("newPassword2",
// "newPassword2.dontMatch", "Passwords dont match");
}
//if (!bindingResults.hasErrors()) {
String newPSHash = HashUtil.generateHash(changePasswordForm.getNewPassword1(),currentUser.getEmail());
currentUser.setPassword(newPSHash);
//model.addAttribute("successful", new Boolean(true)); //}
return "success";
}
How do I display the error messages back in my view?
Thank you for asking this question. I didn't know about this feature but Form component can be configured with an errorReader (see docs) There is a working example of this feature that should help you with your setup: http://dev.sencha.com/deploy/ext-4.0.0/examples/form/xml-form.html