add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / form / CustomErrorHandling.js

/**\r
 * This example shows a common site registration form. The form appears to be simple but\r
 * it shows a few special things:\r
 *\r
 * - The display of field errors has been customized. Fields have `msgTarget: 'none'` so\r
 * the errors are not displayed with the individual fields; instead event listeners are\r
 * attached to the FormPanel to group up all error messages into a custom global error\r
 * indicator, with a persistent tooltip showing the error details.\r
 * - The "Terms of Use" link has an event handler attached so it opens the page in a modal\r
 * Ext.Window.\r
 * - The password fields have custom validation attached to verify the user enters the\r
 * same value in both.\r
 * - The submit button has `formBind: true` so it is only enabled when the form becomes\r
 * valid.\r
 */\r
Ext.define('KitchenSink.view.form.CustomErrorHandling', {\r
    extend: 'Ext.form.Panel',\r
    xtype: 'form-customerrors',\r
    controller: 'form-customerrors',\r
    \r
    //<example>\r
    requires: [\r
        'KitchenSink.view.form.CustomErrorHandlingController'\r
    ],\r
    \r
    exampleTitle: 'Custom Error Handling',\r
    otherContent: [{\r
        type: 'ViewController',\r
        path: 'classic/samples/view/form/CustomErrorHandlingController.js'\r
    }],\r
    //</example>\r
    \r
    frame: true,\r
    width: 350,\r
    bodyPadding: 10,\r
    bodyBorder: true,\r
    title: 'Account Registration',\r
\r
    defaults: {\r
        anchor: '100%'\r
    },\r
    \r
    fieldDefaults: {\r
        labelWidth: 110,\r
        labelAlign: 'left',\r
        msgTarget: 'none',\r
        invalidCls: '' //unset the invalidCls so individual fields do not get styled as invalid\r
    },\r
\r
    /*\r
     * Listen for validity change on the entire form and update the combined error icon\r
     */\r
    listeners: {\r
        validitychange: 'updateErrorState',\r
        errorchange: 'updateErrorState'\r
    },\r
\r
    dockedItems: [{\r
        cls: Ext.baseCSSPrefix + 'dd-drop-ok',\r
        xtype: 'container',\r
        dock: 'bottom',\r
        layout: {\r
            type: 'hbox',\r
            align: 'middle'\r
        },\r
        padding: '10 10 5',\r
\r
        items: [{\r
            xtype: 'component',\r
            reference: 'formErrorState',\r
            height: '100%',\r
            invalidCls: Ext.baseCSSPrefix + 'form-invalid-icon-default',\r
            validCls: Ext.baseCSSPrefix + 'dd-drop-icon',\r
            baseCls: 'form-error-state',\r
            flex: 1,\r
            validText: 'Form is valid',\r
            invalidText: 'Form has errors',\r
            \r
            tipTpl: [\r
                '<ul class="' + Ext.baseCSSPrefix + 'list-plain">',\r
                    '<tpl for=".">',\r
                        '<li><span class="field-name">{name}</span>: ',\r
                            '<span class="error">{error}</span>',\r
                        '</li>',\r
                    '</tpl>',\r
                '</ul>'\r
            ],\r
\r
            setErrors: function(errors) {\r
                var me = this,\r
                    tpl = me.tipTpl,\r
                    tip = me.tip;\r
                \r
                if (!me.tipTpl.isTemplate) {\r
                    tpl = me.tipTpl = new Ext.XTemplate(tpl);\r
                }\r
                \r
                if (!tip) {\r
                    tip = me.tip = Ext.widget('tooltip', {\r
                        target: me.el,\r
                        title: 'Error Details:',\r
                        minWidth: 200,\r
                        autoHide: false,\r
                        anchor: 'top',\r
                        mouseOffset: [-11, -2],\r
                        closable: true,\r
                        constrainPosition: false,\r
                        cls: 'errors-tip'\r
                    });\r
                }\r
\r
                errors = Ext.Array.from(errors);\r
\r
                // Update CSS class and tooltip content\r
                if (errors.length) {\r
                    me.addCls(me.invalidCls);\r
                    me.removeCls(me.validCls);\r
                    me.update(me.invalidText);\r
                    tip.setDisabled(false);\r
                    tip.update(tpl.apply(errors));\r
                    tip.show();\r
                }\r
                else {\r
                    me.addCls(me.validCls);\r
                    me.removeCls(me.invalidCls);\r
                    me.update(me.validText);\r
                    tip.setDisabled(true);\r
                    tip.hide();\r
                }\r
            }\r
        }, {\r
            xtype: 'button',\r
            formBind: true,\r
            disabled: true,\r
            text: 'Submit Registration',\r
            minWidth: 140,\r
            listeners: {\r
                click: 'submitRegistration'\r
            }\r
        }]\r
    }],\r
    \r
    items: [{\r
        xtype: 'textfield',\r
        name: 'username',\r
        fieldLabel: 'User Name',\r
        allowBlank: false,\r
        minLength: 6\r
    }, {\r
        xtype: 'textfield',\r
        name: 'email',\r
        fieldLabel: 'Email Address',\r
        vtype: 'email',\r
        allowBlank: false\r
    }, {\r
        xtype: 'textfield',\r
        name: 'password1',\r
        fieldLabel: 'Password',\r
        inputType: 'password',\r
        style: 'margin-top: 15px',\r
        allowBlank: false,\r
        minLength: 8\r
    }, {\r
        xtype: 'textfield',\r
        name: 'password2',\r
        fieldLabel: 'Repeat Password',\r
        inputType: 'password',\r
        allowBlank: false,\r
        \r
        /*\r
         * Custom validator implementation - checks that the value matches what was entered into\r
         * the password1 field.\r
         */\r
        validator: function(value) {\r
            var password1 = this.previousSibling('[name=password1]');\r
            return (value === password1.getValue()) ? true : 'Passwords do not match.'\r
        }\r
    },\r
\r
    /*\r
     * Terms of Use acceptance checkbox. Two things are special about this:\r
     * 1) The boxLabel contains a HTML link to the Terms of Use page; a special\r
     *    click listener opens this page in a modal Ext window for convenient viewing,\r
     *    and the Decline and Accept buttons in the window update the checkbox's state\r
     *    automatically.\r
     * 2) This checkbox is required, i.e. the form will not be able to be submitted\r
     *    unless the user has checked the box. Ext does not have this type of validation\r
     *    built in for checkboxes, so we add a custom getErrors method implementation.\r
     */\r
    {\r
        xtype: 'checkboxfield',\r
        name: 'acceptTerms',\r
        reference: 'acceptTerms',\r
        fieldLabel: 'Terms of Use',\r
        hideLabel: true,\r
        margin: '15 0 0 0',\r
        boxLabel: 'I have read and accept the <a href="#" class="terms">Terms of Use</a>.',\r
\r
        // Listener to open the Terms of Use page link in a modal window\r
        // Note that the listener method itself is defined in the ViewController\r
        listeners: {\r
            click: {\r
                element: 'boxLabelEl',\r
                fn: 'onTermsOfUseElementClick'\r
            }\r
        },\r
\r
        // Custom validation logic - requires the checkbox to be checked\r
        getErrors: function() {\r
            return this.getValue() ? [] : ['You must accept the Terms of Use']\r
        }\r
    }, {\r
        // The window is added to the form's children array to be handled\r
        // by the form's ViewController. In a more complicated case we would\r
        // probably want the window to have its own ViewController.\r
        xtype: 'window',\r
        reference: 'termsOfUseWindow',\r
        closeAction: 'hide',\r
        title: 'Terms of Use',\r
        modal: true,\r
        width: 700,\r
        height: 400,\r
        bodyPadding: '10 20',\r
        scrollable: true,\r
\r
        // Wall of text\r
        loader: {\r
            url: 'data/form/terms-of-use.html',\r
            autoLoad: true\r
        },\r
    \r
        buttons: [{\r
            text: 'Decline',\r
            handler: 'declineTermsOfUse'\r
        }, {\r
            text: 'Accept',\r
            handler: 'acceptTermsOfUse'\r
        }]\r
    }],\r
\r
    beforeDestroy: function() {\r
        var error = this.lookupReference('formErrorState');\r
        if (error) {\r
            Ext.destroy(error.tip);\r
        }\r
        this.callParent();\r
    }\r
});\r