Как отобразить ошибки проверки на стороне сервера рядом с полями formPanel с помощью extjs4?

Question

Я пытаюсь связать свои поля класса с моими полями представления, используя Extjs4. Я сделал до такой степени, что я могу отправить форму и получить результат обратно, но не уверен, как отобразить какое-либо сообщение об ошибке рядом с соответствующими полями, если оно не проходит проверку. Я хотел бы связать эти поля непосредственно с моим классом (как мы делаем для пружинного mvc, например - bindingResults.rejectValue («currentPassword», «currentPassword.incorrect», «Пароль неверен»); и он отображается в представлении).

Моя формаПанель:

{   
    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',
    }

Контроллер, который отправляет событие при нажатии кнопки -

this.getChangePasswordForm().submit();

И мой класс

@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";
}

Как отобразить сообщения об ошибках обратно в моем представлении?

Answer 1

У меня есть Ext.form.Panel с:

id: 'any-id',
conroller: 'controller-id',
items: [
        {
            fieldLabel: 'Field1',
            name: 'field1',
        },
        {
            fieldLabel: 'Field2',
            name: 'field2',
        }
    ],

    buttons: [
        {
            text:'Click Me',
            itemId: 'buttonId',
            handler: 'onButtonClick'
        }
    ]

В ID контроллера:

onButtonClick: function(button) {
    var window = Ext.getCmp('any-id');    
    Ext.Ajax.request({
                url: 'url',
                method : "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                jsonData: window.getForm().getValues(),
                useDefaultXhrHeader : false,
                withCredentials: false,
                success : function(form, action) {
                   var response = Ext.JSON.decode(form.responseText);
                   var puke = response.status.puke;

                   for (var key in puke) {
                       form.findField(key).markInvalid(puke[key]);
                   }
                }
    }
}

И JSON с сервера:

{
  "status" : {
    "code" : 100,
    "message" : "Validation error."
    "puke" : [{"field1:", "Error message."}, {"field2:", "Another error message."}]
  }
}

Answer 2

Спасибо, что задали этот вопрос.Я не знал об этой функции, но компонент Form можно настроить с помощью errorReader (см. docs ). Существует рабочий пример этой функции, которая должна помочь вам в настройке: http://dev.sencha.com/deploy/ext-4.0.0/examples/form/xml-form.html