[CLOSED] Validate FormPanel and Save It using DirectMethods using MVC

[Ujvari]

Hi,

I did not received an answer for my question yet. I wanna use my Data Annotation Model to show errors and requirements in my form without using javascript to submit the form. I want to submit the form directly to the controller and after the model is validated just show the proper errors in the form.
Here is my entire code:

This the View that I'm using. As you can see a try many examples from you guys and nothing seems to work. If I use a DirectEvent to submit to my controller it works but, I can't receive the errors back. Simply submiting the form Doesn't work.

x.Panel()
            .Title("Dados Paciente")
            .ID("pnlDadosPaciente")
            .AutoScroll(true)
            .Border(false)
            .Layout(LayoutType.Fit)
            .Items(
                x.FormPanel()
                    .ID("frmPaciente")
                    .Border(false)
                    .Layout(LayoutType.Fit)
                    .FieldDefaults(fd =>
                        {
                            fd.LabelAlign = LabelAlign.Left;
                            fd.MsgTarget = MessageTarget.Side;
                            fd.InvalidText = "Obrigat?rio";
                            fd.EnforceMaxLength = true;
                            fd.AutoFitErrors = true;
                            //fd.AllowBlank = false;
                            fd.SelectOnFocus = true;
                            fd.LabelWidth = 150;
                        })
                    .ItemsFromPartial("_DadosPaciente", Model.PacienteModel),
                x.DataView()
                    .Store(
                        x.ModelStateStore()
                            .ID("msPaciente")
                    )
            )
            .Buttons(
                x.Button()
                    .Icon(Icon.DatabaseSave)
                    .Text("Salvar Paciente")
                    .ID("btnSave")
                    .Disabled(true)
                    .FormBind(true)
                    .Type(ButtonType.Submit)
                    .CausesValidation(true)
                    //.Handler("#{frmPaciente}.submit();"),
                    .Handler(@"#{pnlDadosPaciente}.child('dataview').getStore().removeAll(); #{frmPaciente}.submit({clientValidation: false});"),
                    //.DirectEvents(de =>
                    //{
                    //    de.Click.Url = Url.Action("SavePaciente");
                    //    //de.Click.EventMask.ShowMask = true;
                    //    de.Click.FormID = "frmPaciente";
                    //})        
                x.Button()
                    .Icon(Icon.Erase)
                    //.Disabled(true)
                    .ID("btnClear")
                    .Text("Limpar Campos")
                    .OnClientClick("#{frmPaciente}.reset();")
            ).Padding(5),

This is my Model:

    public class PacienteModel : IValidatableObject
    {
        public long Id { get; set; }
        public List<Ext.Net.ListItem> PacientesTipos { get; set; }
        public List<Ext.Net.ListItem> Etnias { get; set; }
        public List<Ext.Net.ListItem> TiposSanguineos { get; set; }
        public List<Ext.Net.ListItem> EstadosCivis { get; set; }
        public List<ESTADOS> Estados { get; set; }
        public List<CIDADES> Cidades { get; set; }
        public List<Ext.Net.ListItem> FormasPagtos { get; set; }

        [Required(ErrorMessage = "Nome Obrigat?rio")]
        public string NomePaciente { get; set; }

        [Required(ErrorMessage = "Email Obrigat?rio")]
        public string EmailPaciente { get; set; }

        [Required(ErrorMessage = "Data de Nascimento Obrigat?ria")]
        public DateTime DataNascimento { get; set; }

        [Required(ErrorMessage="Idade Obrigat?ria")]
        public int Idade { get; set; }
        public int QtdFilhos { get; set; }

        [Required(ErrorMessage="Por favor, selecione um tipo de paciente")]
        public int PacienteTipoId { get; set; }
        
        [Required(ErrorMessage="Por favor, selecione uma etnia para o paciente")]
        public int EtniaId { get; set; }
        
        [Required(ErrorMessage="Por favor, selecione um Tipo Sangu?neo")]
        public int TipoSanguineoId { get; set; }

        [Required(ErrorMessage="Por favor, selecione um Estado Civil")]
        public int EstadoCivilId { get; set; }

        [Required(ErrorMessage="Por favor, selecione um Estado")]
        public int EstadoId { get; set; }

        [Required(ErrorMessage="Por favor, selecione uma Cidade")]
        public int CidadeId { get; set; }

        public int FormaPagtoId { get; set; }

        [Required(ErrorMessage = "Endere?o Obrigat?rio")]
        public string Endereco { get; set; }
       
        [Required(ErrorMessage = "N?mero Obrigat?rio")]
        public string Numero { get; set; }
       
        public string Complemento { get; set; }

        [Required(ErrorMessage = "Bairro Obrigat?rio")]
        public string Bairro { get; set; }

        [Required(ErrorMessage = "Cep Obrigat?rio")]
        [MinLength(8)]
        [MaxLength(9)]
        public string Cep { get; set; }

        public PacienteModel()
        {
            Id = 0;
            PacientesTipos = new List<Ext.Net.ListItem>();
            Etnias = new List<Ext.Net.ListItem>();
            TiposSanguineos = new List<Ext.Net.ListItem>();
            EstadosCivis = new List<Ext.Net.ListItem>();
            Estados = new List<ESTADOS>();
            Cidades = new List<CIDADES>();
            FormasPagtos = new List<Ext.Net.ListItem>();
            Endereco = string.Empty;
            Numero = string.Empty;
            Complemento = string.Empty;
            Bairro = string.Empty;
            Cep = string.Empty;
            NomePaciente = string.Empty;
            EmailPaciente = string.Empty;
            DataNascimento = DateTime.MinValue;
            Idade = 0;
            QtdFilhos = 0;
            PacienteTipoId = 0;
            EtniaId = 0;
            TipoSanguineoId = 0;
            EstadoCivilId = 0;
            EstadoId = 0;
            CidadeId = 0;
        }

        public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
        {
            yield break;
        }
    }

And this is my controller:

public ActionResult SavePaciente(PacienteModel paciente)
        {
            if (ModelState.IsValid)
            {
                X.Msg.Show(new MessageBoxConfig
                {
                    Message = "Salvando Paciente, aguarde...",
                    ProgressText = "Salvando...",
                    Width = 300,
                    Wait = true,
                    WaitConfig = new WaitConfig { Interval = 200 },
                    IconCls = "ext-mb-download",
                    AnimEl = this.GetCmp<Button>("btnSave").ClientID,
                });

                X.AddScript("setTimeout(function () { Ext.MessageBox.hide(); Sucesso('pnlDadosPessoais','Paciente salvo com sucesso!','Informa??o'); }, 2000);");

            }

            this.GetCmp<ModelStateStore>("msPaciente").DataBind();

            return this.FormPanel(ModelState);
        }

Remember that I'm not creating my form Dynamically using DisplayForModel MVC or EditForModel and this is the code inside the _DadosPaciente partial:

@model VPNUX.FrontEnd.Models.PacienteModel
@{
    var x = Html.X();
}
@(

    x.TabPanel()
    .Border(true)
    .Layout(LayoutType.Fit)
    .Items(
        x.Panel()
            .Listeners(list =>
            {
                list.Activate.Handler = "enableDisableButtons(true);";
            })
            .Title("Dados Pessoais")
            .ID("pnlDadosPessoais")
            .Padding(10)
            .Layout(LayoutType.Form)
            .Border(false)
            .Items(
                x.TextField()
                    .AllowBlank(false)
                    .Name("txtNomePaciente")
                    .InputWidth(300)
                    .FieldLabel("Nome"),
                x.TextField()
                    .AllowBlank(false)
                    .Name("txtEmail")
                    .InputWidth(300)
                    .FieldLabel("Email"),
                x.DateField()
                    .InputWidth(100)
                    .AllowBlank(false)
                    .Name("txtDataNascimento")
                    .FieldLabel("Data Nascimento"),
                x.RadioGroup()
                    .ID("rblSexo")
                    .FieldLabel("Sexo")
                    .AllowBlank(false)
                    .Width(300)
                    .ColumnsNumber(2)
                    .AutomaticGrouping(false)
                    .Items(
                        x.Radio().Name("rblSexo").InputValue("M").BoxLabel("Masculino"),
                        x.Radio().Name("rblSexo").InputValue("F").BoxLabel("Feminino")
                    ),
                x.ComboBox()
                    .Listeners(listener =>
                    {
                        listener.Change.Handler = "changeSexo();";
                    })
                    .FieldLabel("Tipo Paciente")
                    .AllowBlank(false)
                    .InputWidth(250)
                    .Items(Model.PacientesTipos)
                    .ID("ddlTipoPaciente")
                    .Name("ddlTipoPaciente"),
                x.ComboBox()
                    .FieldLabel("Tipo Sangu?neo")
                    .AllowBlank(false)
                    .Items(Model.TiposSanguineos)
                    .InputWidth(250)
                    .Name("ddlTipoSanguineo"),
                x.ComboBox()
                    .Items(Model.Etnias)
                    .FieldLabel("Etnia")
                    .AllowBlank(false)
                    .InputWidth(250)
                    .Name("ddlEtnias"),
                x.ComboBox()
                    .Items(Model.EstadosCivis)
                    .FieldLabel("Estado Civil")
                    .AllowBlank(false)
                    .InputWidth(250)
                    .Name("ddlEstadoCivil"),
                x.NumberField()
                    .Name("txtIdade")
                    .InputWidth(100)
                    .AllowBlank(false)
                    .AllowDecimals(false)
                    .FieldLabel("Idade"),
                x.NumberField()
                    .Name("txtQtdFilhos")
                    .InputWidth(100)
                    .AllowBlank(true)
                    .AllowDecimals(false)
                    .FieldLabel("Qtd. Filhos"),
                x.NumberField()
                    .Name("txtPeso")
                    .InputWidth(100)
                    .AllowBlank(false)
                    .FieldLabel("Peso")
                    .AllowDecimals(false)
                    .EmptyText("Kg"),
                x.NumberField()
                    .Name("txtAltura")
                    .InputWidth(100)
                    .FieldLabel("Altura")
                    .AllowBlank(false)
                    .EmptyText("0,00")
                    .DecimalPrecision(2)
                    .AllowDecimals(true)
                    .DecimalSeparator(","),
                x.FileUploadField()
                    .Name("fupFotoPaciente")
                    .FieldLabel("Foto Paciente")
                    .AllowBlank(true)
                    .ID("fupFotoPaciente")
                    .Width(500)
                    .Icon(Icon.Attach),
                x.TextField()
                    .ID("txtIndicacao")
                    .Margins("0 0 5 0")
                    .InputWidth(300)
                    .Name("txtIndicacao")
                    .FieldLabel("Quem indicou")
                    .AllowBlank(true),
                x.TextField()
                    .AllowBlank(true)
                    .Name("txtTelResidencial")
                    .InputWidth(100)
                    .FieldLabel("Tel. Residencial")
                    .Plugins(
                        x.InputMask()
                            .Mask("(99) 9999-9999")
                    ),
                x.TextField()
                    .AllowBlank(false)
                    .Name("txtTelCelular")
                    .InputWidth(100)
                    .FieldLabel("Tel. Celular")
                    .Plugins(
                        x.InputMask()
                            .Mask("(99) 9 9999-9999")
                    ),
                x.TextField()
                    .AllowBlank(true)
                    .Name("txtTelComercial")
                    .InputWidth(100)
                    .FieldLabel("Tel. Comercial")
                    .Plugins(
                        x.InputMask()
                            .Mask("(99) 9999-9999")
                    )
            ),
        x.Panel()
            .Title("Endere?o")
            .Padding(10)
            .Border(false)
            .Layout(LayoutType.Form)
            .Listeners(list =>
            {
                list.Activate.Handler = "enableDisableButtons(true);";
            })
            .Items(
                x.TextField()
                    .Name("txtEndereco")
                    .InputWidth(400)
                    .AllowBlank(false)
                    .FieldLabel("Endere?o"),
                x.TextField()
                    .InputWidth(100)
                    .Name("txtNumero")
                    .AllowBlank(false)
                    .FieldLabel("N?mero"),
                x.TextField()
                    .InputWidth(100)
                    .Name("txtComplemento")
                    .AllowBlank(true)
                    .FieldLabel("Complemento"),
                x.TextField()
                    .InputWidth(200)
                    .Name("txtBairro")
                    .AllowBlank(false)
                    .FieldLabel("Bairro"),
                x.ComboBox()
                    .InputWidth(250)
                    .Name("ddlEstado")
                    .AllowBlank(false)
                    .FieldLabel("Estado"),
                x.ComboBox()
                    .InputWidth(250)
                    .Name("ddlCidade")
                    .AllowBlank(false)
                    .FieldLabel("Cidade")
            ),
        x.Panel()
            .Title("Dados Consulta")
            .Listeners(list =>
            {
                list.Activate.Handler = "enableDisableButtons(false);";
            })
            .Padding(10)
            .Border(false)
            .Layout(LayoutType.Form)
            .Items(
                    x.RadioGroup()
                    .ID("rblTipoConsulta")
                    .FieldLabel("Tipo Consulta")
                    .LabelWidth(120)
                    .Width(300)
                    .ColumnsNumber(2)
                    .AllowBlank(false)
                    .AutomaticGrouping(false)
                    .Items(
                        x.Radio().Name("rblTipoConsulta").InputValue("Particular").BoxLabel("Particular").Checked(true),
                        x.Radio().Name("rblTipoConsulta").InputValue("Conv?nio").BoxLabel("Conv?nio")
                    )
                        .Listeners(listener => { listener.Change.Handler = "disableFields();";
                                                    listener.Render.Handler = "disableFields();";
                        }),
                x.TextField()
                    .ID("ddlConvenio")
                    .Name("ddlConvenio")
                    .LabelWidth(120)
                    .Disable(true)
                    .InputWidth(400)
                    .FieldLabel("Conv?nio"),
                x.TextField()
                    .ID("ddlPlanoConvenio")
                    .LabelWidth(120)
                    .InputWidth(400)
                    .Name("ddlPlanoConvenio")
                    .FieldLabel("Plano"),
                x.TextField()
                    .ID("txtNumeroCarteira")
                    .LabelWidth(120)
                    .InputWidth(300)
                    .Name("txtNumeroCarteira")
                    .MaskRe("[0-9]")
                    .FieldLabel("N?mero Carteira"),
                x.TextField()
                    .ID("txtNomeConveniado")
                    .LabelWidth(120)
                    .InputWidth(300)
                    .Name("txtNomeConveniado")
                    .FieldLabel("Nome Conveniado"),
                x.TextField()
                    .ID("txtCodigoAutorizacao")
                    .LabelWidth(120)
                    .InputWidth(300)
                    .Name("txtCodigoAutorizacao")
                    .FieldLabel("C?digo Autoriza??o"),
                x.MenuSeparator()
                    .Disabled(true)
                    .Width(700)
                    .Margin(10)
                    .Flex(1),
                x.FieldSet()
                    .Flex(1)
                    .Title("Dados de Pagto.")
                    .ID("fsDadosPagto")
                    .Width(600)
                    .Padding(20)
                    .Items(
                        x.TextField()
                            .ID("txtValorConsulta")
                            .Margins("0 0 5 0")
                            .LabelWidth(120)
                            .InputWidth(100)
                            .AllowBlank(false)
                            .Name("txtValorConsulta")
                            .MaskRe(@"^([1-9]{1}[\d]{0,2}(\.[\d]{3})*(\,[\d]{0,2})?|[1-9]{1}[\d]{0,}(\,[\d]{0,2})?|0(\,[\d]{0,2})?|(\,[\d]{1,2})?)$")
                            .FieldLabel("Valor Consulta R$"),
                        x.ComboBox()
                            .FieldLabel("Forma de Pagto")
                            .Margins("0 0 5 0")
                            .AllowBlank(false)
                            .LabelWidth(120)
                            .InputWidth(250)
                            .Items(Model.FormasPagtos)
                            .ID("ddlFormaPagto")
                            .Name("ddlFormaPagto"),
                        x.DateField()
                            .FieldLabel("Data de Pagto")
                            .LabelWidth(120)
                            .InputWidth(100)
                            .AllowBlank(false)
                            .ID("dfDataPagto")
                            .Name("dfDataPagto")
                            .EmptyText(DateTime.Now.Date.ToString("dd/MM/yyyy"))
                            .SelectedDate(DateTime.Now.Date)
                            .Format("dd/MM/yyyy")

                    )
            )
    )
)

<script>
    Ext.override(Ext.net.InputMask, {
        getErrors: function () {
            var field = this.getCmp(),
                errors = this.fieldGetErrors.call(field, field.processRawValue(field.getRawValue()));

            if (errors.length == 0 && field.getRawValue().length == 0 && field.allowBlank)
                return errors;

            if (!this.isValueValid()) {
                errors.push(this.invalidMaskText || field.invalidText);
            }

            return errors;
        },
    });
    
    function changeSexo() {
        if (window.App.ddlTipoPaciente.getRawValue() == "GESTANTE" || window.App.ddlTipoPaciente.getRawValue() == "LACTANTE") {
            var sexo = Ext.getCmp("rblSexo");
            sexo.setValue({ rblSexo: "F" });
        }
    }
    
    function enableDisableButtons(disable) {
        if (disable) {
            window.App.btnSave.setDisabled(true);
        } else {
            window.App.btnSave.setDisabled(false);
        }

        
    }
   
    function disableFields() {
        if (window.App.frmPaciente.getForm().getValues()["rblTipoConsulta"] == 'Particular') {
            window.App.ddlConvenio.setDisabled(true);
            window.App.ddlPlanoConvenio.setDisabled(true);
            window.App.txtNumeroCarteira.setDisabled(true);
            window.App.txtNomeConveniado.setDisabled(true);
            window.App.txtCodigoAutorizacao.setDisabled(true);
            
            window.App.fsDadosPagto.setDisabled(false);
            window.App.txtValorConsulta.setDisabled(false);
            window.App.ddlFormaPagto.setDisabled(false);
            window.App.dfDataPagto.setDisabled(false);
        } else {
            window.App.ddlConvenio.setDisabled(false);
            window.App.ddlPlanoConvenio.setDisabled(false);
            window.App.txtNumeroCarteira.setDisabled(false);
            window.App.txtNomeConveniado.setDisabled(false);
            window.App.txtCodigoAutorizacao.setDisabled(false);
            
            window.App.fsDadosPagto.setDisabled(true);
            window.App.txtValorConsulta.setDisabled(true);
            window.App.ddlFormaPagto.setDisabled(true);
            window.App.dfDataPagto.setDisabled(true);
        }
    }
</script>

Thank you very much for your help

[Ujvari]

In the example below if you press Save nothing happens. The error messages working fine but the Submit is not working

[Vladimir]

Hi,

I did not received an answer for my question yet. I wanna use my Data Annotation Model to show errors and requirements in my form without using javascript to submit the form. I want to submit the form directly to the controller and after the model is validated just show the proper errors in the form.errors in the form.

I already posted such example, it works fine and do what you want (submit form to controller and display validation errors)
http://mvc.ext.net/#/Models/Model_State/

What exactly do you need which is not presented in that example?

About the code which you posted. I see 'SavePaciente' controller action but I don't see anywhere entry point for that action. Why do you expect that form submiting will execute that action. Please define Url for FormPanel like in the online sample

.Url(Url.Action("SavePaciente"))

In the example below if you press Save nothing happens. The error messages working fine but the Submit is not working

I don't see any example (screenshot only). If you mean the following online example then it works fine (i see a message about successful submitting)
http://mvc.ext.net/#/Models/Data_Annotations/

[Ujvari]

Hi,

Here's my code now. I even put the DataView according to the Model_State example that you send (I don't wanna show a list of errors just errors inside de form) and the Url for the form (My Bad) but it still does not work. I can get to my controller now just fine but the errors were not showed.

x.Panel()
            .Title("Dados Paciente")
            .ID("pnlDadosPaciente")
            .AutoScroll(true)
            .Border(false)
            .Layout(LayoutType.Fit)
            .Items(
                x.FormPanel()
                    .ID("frmPaciente")
                    .Border(false)
                    .Layout(LayoutType.Fit)
                    .Url(Url.Action("SavePaciente","Consulta"))
                    .FieldDefaults(fd =>
                        {
                            fd.LabelAlign = LabelAlign.Left;
                            fd.MsgTarget = MessageTarget.Side;
                            fd.InvalidText = "Obrigat?rio";
                            fd.EnforceMaxLength = true;
                            fd.AutoFitErrors = true;
                            //fd.AllowBlank = false;
                            fd.SelectOnFocus = true;
                            fd.LabelWidth = 150;
                        })
                    .ItemsFromPartial("_DadosPaciente", Model.PacienteModel),
                x.DataView()
                    .Flex(1)
                    .ItemSelector("li")
                    .Store(
                        Html.X().ModelStateStore()
                            .ID("smPaciente")
                    )
                    .Tpl(
                        Html.X().XTemplate()
                            .Html(
                                @<text>
                                    <ul style="list-style-type:circle">
                                        <tpl for=".">
                                            <li style="color:red;">{error}</li>
                                        </tpl>
                                    </ul>
                                </text>
                            )
                    )
            )
            .Buttons(
                x.Button()
                    .Icon(Icon.DatabaseSave)
                    .Text("Salvar Paciente")
                    .ID("btnSave")
                    .Disabled(true)
                    .FormBind(false)
                    .Type(ButtonType.Submit)
                    .CausesValidation(true)
                    .Handler(@"#{pnlDadosPaciente}.child('dataview').getStore().removeAll(); #{frmPaciente}.submit({clientValidation: false});"),
                x.Button()
                    .Icon(Icon.Erase)
                    //.Disabled(true)
                    .ID("btnClear")
                    .Text("Limpar Campos")
                    .OnClientClick("#{frmPaciente}.reset();")
            ).Padding(5),

Here's the controller:

public ActionResult SavePaciente(PacienteModel paciente)
        {
            if (ModelState.IsValid)
            {
                X.Msg.Show(new MessageBoxConfig
                {
                    Message = "Salvando Paciente, aguarde...",
                    ProgressText = "Salvando...",
                    Width = 300,
                    Wait = true,
                    WaitConfig = new WaitConfig { Interval = 200 },
                    IconCls = "ext-mb-download",
                    AnimEl = this.GetCmp<Button>("btnSave").ClientID,
                });

                X.AddScript("setTimeout(function () { Ext.MessageBox.hide(); Sucesso('pnlDadosPessoais','Paciente salvo com sucesso!','Informa??o'); }, 2000);");

            }

            this.GetCmp<ModelStateStore>("msPaciente").DataBind();

            return this.FormPanel(ModelState);
        }

[Ujvari]

Hi,

I found what's wrong. The Field names are not the same as the form field names. It work's because of the ModelStateStore right? How can I use that without using the DataView? As I told you before I just want to show the errors Inside the form not in a list below it.

Thanks

[Daniil]

The Field names are not the same as the form field names. It work's because of the ModelStateStore right?

Well, yes, a FormPanel's Items has to be configured according to a Model. It is done in the example using an EditorForModel helper.

.ItemsFrom(b => Html.EditorForModel(...))

I think it can be done as you do:

.ItemsFromPartial("_DadosPaciente", Model.PacienteModel)

but you must carry about everything yourself.

How can I use that without using the DataView? As I told you before I just want to show the errors Inside the form not in a list below it.

Please clarify how exactly you want the errors to be shown.

[Ujvari]

Well, yes, a FormPanel's Items has to be configured according to a Model. It is done in the example using an EditorForModel helper.

.ItemsFrom(b => Html.EditorForModel(...))

I think it can be done as you do:

.ItemsFromPartial("_DadosPaciente", Model.PacienteModel)

but you must carry about everything yourself.



Please clarify how exactly you want the errors to be shown.

I was able to show all the errors inside the form next to each field with no problem but only when I use the ModelStateStore and to use that I had to create a DataView as my code show below. Can I use the ModelStateStore without using the DataView? I don't want a list of errors showing below my form as your example does I just want to show the errors next to each field

x.Panel()
            .Title("Dados Paciente")
            .ID("pnlDadosPaciente")
            .AutoScroll(true)
            .Border(false)
            .Layout(LayoutType.Fit)
            .Items(
                x.FormPanel()
                    .ID("frmPaciente")
                    .Border(false)
                    .Layout(LayoutType.Fit)
                    .Url(Url.Action("SavePaciente","Consulta"))
                    .FieldDefaults(fd =>
                        {
                            fd.LabelAlign = LabelAlign.Left;
                            fd.MsgTarget = MessageTarget.Side;
                            //fd.InvalidText = "Obrigat?rio";
                            fd.EnforceMaxLength = true;
                            //fd.AutoFitErrors = true;
                            //fd.AllowBlank = false;
                            fd.SelectOnFocus = true;
                            fd.LabelWidth = 150;
                        })
                    .ItemsFromPartial("_DadosPaciente", Model.PacienteViewData),
                x.DataView()
                    .StyleHtmlContent(true)
                    .Flex(1)
                    .ItemSelector("li")
                    .StyleSpec("background:white;border:1px solid gray;")
                    .Store(
                        x.ModelStateStore()
                            .ID("smPaciente")
                    )
                    .Tpl(
                        x.XTemplate()
                            .Html(
                                @<text>
                                    <ul style="list-style-type:circle">
                                        <tpl for=".">
                                            <li style="color:red;">{error}</li>
                                        </tpl>
                                    </ul>
                                </text>
                            )
                    )
            )
            .Buttons(
                x.Button()
                    .Icon(Icon.DatabaseSave)
                    .Text("Salvar Paciente")
                    .ID("btnSave")
                    .Disabled(true)
                    .FormBind(false)
                    .Type(ButtonType.Submit)
                    .CausesValidation(true)
                    .Handler(@"#{pnlDadosPaciente}.child('dataview').getStore().removeAll(); #{frmPaciente}.submit({clientValidation: false});"),
                x.Button()
                    .Icon(Icon.Erase)
                    //.Disabled(true)
                    .ID("btnClear")
                    .Text("Limpar Campos")
                    .OnClientClick("#{frmPaciente}.reset();")
            ).Padding(5),

Here's my controller

public ActionResult SavePaciente(PacienteViewData paciente)
        {
            if (ModelState.IsValid)
            {

                //TODO - IMplement code to save the Paciente
                
                X.Msg.Show(new MessageBoxConfig
                {
                    Message = "Salvando Paciente, aguarde...",
                    ProgressText = "Salvando...",
                    Width = 300,
                    Wait = true,
                    WaitConfig = new WaitConfig { Interval = 200 },
                    IconCls = "ext-mb-download",
                    AnimEl = this.GetCmp<Button>("btnSave").ClientID,
                });

                X.AddScript("setTimeout(function () { Ext.MessageBox.hide(); Sucesso('pnlDadosPessoais','Paciente salvo com sucesso!','Informa??o'); }, 2000);");

            }

            this.GetCmp<ModelStateStore>("msPaciente").DataBind();

            return this.FormPanel(ModelState);
        }

[Daniil]

Can I use the ModelStateStore without using the DataView?

Yes, you can. A ModelStateStore is just a Store which contains the information about the errors.

Could you, please, clarify why do you use a ModelStateStore?

I don't want a list of errors showing below my form as your example does I just want to show the errors next to each field

I think it can be possible. This should theoretically work .

1. Define some component near a field where you want an error to be appeared.

2. Use a success handler of a submit call.
http://docs.sencha.com/extjs/4.2.1/#...-method-submit

3. In a success handler iterate all the data of a ModelStateStore and put all the errors to the respective components (which you define in the item #1).

[Daniil]

Also you can try with a FormPanelResult's Errors option.

[Ujvari]

Also you can try with a FormPanelResult's Errors option.

Now I can't reply to this thread.