通过extjs 5中的模型进行表单验证

Question

我正在使用模型验证器探索extjs 5表单验证。我希望表单显示来自PersonModel的错误。

这是一个创建和保存Person实例的简单表单。

如何连接模型，模型视图和视图以实现此目的？

由于

Ext.application({
    name: 'Fiddle',

    launch: function() {

        Ext.define('PersonModel', {
            extend: 'Ext.data.Model',
            fields: [{
                name: 'fullName',
                type: 'string',
                validators: [{
                    type: 'presence'
                }]
            }]
        });

        Ext.define('PersonViewModel', {
            extend: 'Ext.app.ViewModel'
        });

        // Form should show the required (presence) field validators as errors
        // when create button is clicked since formBind = true
        // I want form to use the model field validators, I don't want to
        // put validators in form
        //
        // How do I hook up view, viewmodel and model for this ????
        //
        Ext.define('PersonFormView', {
            extend: 'Ext.form.Panel',
            modelValidation: true,
            viewModel: {
                type: 'PesonViewModel'
            },
            title: 'Create Person',
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'Full Name',
                name: 'fullName',
                vtype: 'required'
            }],
            buttons: [{
                text: 'Create',
                formBind: true,
                disabled: true,
                handler: function() {
                    // if valid
                    //  create Person model instance and .save()
                }
            }]
        });


        //
        // show form

        Ext.create('PersonFormView', {
            renderTo: Ext.getBody()
        })
    }
});

Answer 1

我这样想出来了。如果您有更好的方法，请告诉我。

https://fiddle.sencha.com/#fiddle/i5p