Ext.js5表单—（自定义错误信息）（formBind）(53）

View

/** * This example shows a common site registration form. The form appears to be simple but * it shows a few special things: * 这个例子展示了一个普通的页面登录表单，这个表单看起来很简单但是他展示了一些比较特别的事儿： * - The display of field errors has been customized. Fields have `msgTarget: 'none'` so * the errors are not displayed with the individual fields; instead event listeners are * attached to the FormPanel to group up all error messages into a custom global error * indicator, with a persistent tooltip showing the error details. * field的错误提示是自定义的，fields的属性msgTarget:none,因此错误不是针对单个的field进行提示的，而是设置 * 了针对整个表单的报错。 * - The "Terms of Use" link has an event handler attached so it opens the page in a modal * Ext.Window. * 点击Terms of Use会弹出一个窗口 * - The password fields have custom validation attached to verify the user enters the * same value in both. *  * - The submit button has `formBind: true` so it is only enabled when the form becomes * valid. * 提交按钮绑定了formBind:true,只有在表单有效的时候才能提交 */Ext.define('KitchenSink.view.form.CustomErrorHandling', {    extend: 'Ext.form.Panel',    xtype: 'form-customerrors',    controller: 'form-customerrors',    frame: true,    width: 350,    bodyPadding: 10,    bodyBorder: true,    title: 'Account Registration',    defaults: {        anchor: '100%'    },    fieldDefaults: {        labelWidth: 110,        labelAlign: 'left',        msgTarget: 'none',        invalidCls: '' //unset the invalidCls so individual fields do not get styled as invalid        //并没有设置invalidCls，因此单个的fields在无效的时候不会得到样式    },    /*     * Listen for validity change on the entire form and update the combined error icon     * 监听整个表单变化的有效性，并且联合错误图标一起更新     */    listeners: {    //有效性的监听        validitychange: 'updateErrorState',        //错误信息的监听        errorchange: 'updateErrorState'    },    dockedItems: [{        cls: Ext.baseCSSPrefix + 'dd-drop-ok',        xtype: 'container',        dock: 'bottom',        layout: {            type: 'hbox',            align: 'middle'        },        padding: '10 10 5',        items: [{            xtype: 'component',            reference: 'formErrorState',            height: '100%',            invalidCls: Ext.baseCSSPrefix + 'form-invalid-icon-default',            validCls: Ext.baseCSSPrefix + 'dd-drop-icon',            baseCls: 'form-error-state',            flex: 1,            validText: 'Form is valid',            invalidText: 'Form has errors',            tipTpl: [                '<ul class="' + Ext.baseCSSPrefix + 'list-plain">',                    '<tpl for=".">',                        '<li><span class="field-name">{name}</span>: ',                            '<span class="error">{error}</span>',                        '</li>',                    '</tpl>',                '</ul>'            ],            setErrors: function(errors) {                var me = this,                    tpl = me.tipTpl,                    tip = me.tip;                if (!me.tipTpl.isTemplate) {                    tpl = me.tipTpl = new Ext.XTemplate(tpl);                }                if (!tip) {                    tip = me.tip = Ext.widget('tooltip', {                        target: me.el,                        title: 'Error Details:',                        minWidth: 200,                        autoHide: false,                        anchor: 'top',                        mouseOffset: [-11, -2],                        closable: true,                        constrainPosition: false,                        cls: 'errors-tip'                    });                }                errors = Ext.Array.from(errors);                // Update CSS class and tooltip content                if (errors.length) {                    me.addCls(me.invalidCls);                    me.removeCls(me.validCls);                    me.update(me.invalidText);                    tip.setDisabled(false);                    tip.update(tpl.apply(errors));                    tip.show();                }                else {                    me.addCls(me.validCls);                    me.removeCls(me.invalidCls);                    me.update(me.validText);                    tip.setDisabled(true);                    tip.hide();                }            }        }, {            xtype: 'button',            formBind: true,            disabled: true,            text: 'Submit Registration',            minWidth: 140,            listeners: {                click: 'submitRegistration'            }        }]    }],    items: [{        xtype: 'textfield',        name: 'username',        fieldLabel: 'User Name',        allowBlank: false,        minLength: 6    }, {        xtype: 'textfield',        name: 'email',        fieldLabel: 'Email Address',        vtype: 'email',        allowBlank: false    }, {        xtype: 'textfield',        name: 'password1',        fieldLabel: 'Password',        inputType: 'password',        style: 'margin-top: 15px',        allowBlank: false,        minLength: 8    }, {        xtype: 'textfield',        name: 'password2',        fieldLabel: 'Repeat Password',        inputType: 'password',        allowBlank: false,        /*         * Custom validator implementation - checks that the value matches what was entered into         * the password1 field.         */        validator: function(value) {            var password1 = this.previousSibling('[name=password1]');            return (value === password1.getValue()) ? true : 'Passwords do not match.'        }    },    /*     * Terms of Use acceptance checkbox. Two things are special about this:     * 1) The boxLabel contains a HTML link to the Terms of Use page; a special     *    click listener opens this page in a modal Ext window for convenient viewing,     *    and the Decline and Accept buttons in the window update the checkbox's state     *    automatically.     *（1）boxlabel里面包含了一个html连接。有一个点击监听能够打开这个窗口，这个窗口还有两个按钮分别代表接受和拒绝。     * 2) This checkbox is required, i.e. the form will not be able to be submitted     *    unless the user has checked the box. Ext does not have this type of validation     *    built in for checkboxes, so we add a custom getErrors method implementation.     * （2）如果想要提交的话。这个checkbox的勾选状态时必须的，Ext中没有这种类型情况的验证，所以我们需要添加一个自定义的getErrors的方法。     */    {        xtype: 'checkboxfield',        name: 'acceptTerms',        reference: 'acceptTerms',        fieldLabel: 'Terms of Use',        hideLabel: true,        margin: '15 0 0 0',        boxLabel: 'I have read and accept the <a href="#" class="terms">Terms of Use</a>.',        // Listener to open the Terms of Use page link in a modal window        // Note that the listener method itself is defined in the ViewController        // 监听器的方法是在试图控制器里面定义的        listeners: {            click: {                element: 'boxLabelEl',                fn: 'onTermsOfUseElementClick'            }        },        // Custom validation logic - requires the checkbox to be checked        //自定义的验证逻辑        getErrors: function() {            return this.getValue() ? [] : ['You must accept the Terms of Use']        }    }, {        // The window is added to the form's children array to be handled        // by the form's ViewController. In a more complicated case we would        // probably want the window to have its own ViewController.        xtype: 'window',        reference: 'termsOfUseWindow',        closeAction: 'hide',        title: 'Terms of Use',        modal: true,        width: 700,        height: 400,        bodyPadding: '10 20',        scrollable: true,        // Wall of text        loader: {            url: 'resources/data/form/terms-of-use.html',            autoLoad: true        },        buttons: [{            text: 'Decline',            handler: 'declineTermsOfUse'        }, {            text: 'Accept',            handler: 'acceptTermsOfUse'        }]    }],    beforeDestroy: function() {        var error = this.lookupReference('formErrorState');        if (error) {            Ext.destroy(error.tip);        }        this.callParent();    }});