How to display server side validation errors next to formPanel fields with extjs4?

Question

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?

Answer 1

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