Loading
 
What's Next: View All Tutorial →

Extjs Form validation, Custom Validation, Handling Data

This articles deals about the 1. Custom validation event 2. Password and ConfirmPassword validation 3. Form Submission 4. Creating form 5. Populate single form fields 6. Poupdate data from modal objects Two files need to be created. 1. ...

Published Date: 07/09/2014  Last Modified Date: 07/09/2014    New Post



This articles deals about the

1. Custom validation event
2. Password and ConfirmPassword validation
3. Form Submission
4. Creating form
5. Populate single form fields
6. Poupdate data from modal objects


Two files need to be created.
1. index.html
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Form Validation</title>

        <!-- Ext JS Files -->
        <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/try/extjs/4.1.1/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://cdn.sencha.io/try/extjs/4.1.1/ext-all.js"></script>

        <!-- App Files -->
        <script type="text/javascript" src="app.js"></script>

        <style type="text/css">
            .field-margin {
                margin: 10px;
            }
        </style>

    </head>
    <body>
        
    </body>
</html>

2. app.js

Ext.require([
    'Ext.grid.*',
    'Ext.data.*'
]);
Ext.onReady(function() {

    //custom validation field
    var telNumberVType = {
        telNumber: function(val, field) {
            // function executed when field is validated
            // return true when field's value (val) is valid
            var telNumberRegex = /^\d{4}\-\d{3}\-\d{4}$/;
            return telNumberRegex.test(val);
        },
        telNumberText: 'Your Telephone Number must only include numbers and hyphens.',
        telNumberMask: /[\d\-]/
    };
    Ext.apply(Ext.form.field.VTypes, telNumberVType);


    //custom validation field that depends on another fields
    Ext.apply(Ext.form.field.VTypes, {
        password: function(val, field) {
            var parentForm = field.up('form'); // get parent form

            // get the form's values
            var formValues = parentForm.getValues();

            // get the value from the configured 'First Password' field
            var firstPasswordValue = formValues[field.firstPasswordFieldName];

            // return true if they match
            return val === firstPasswordValue;
        },
        passwordText: 'Your Passwords do not match.'
    });

    var formPanel = Ext.create('Ext.form.Panel', {
        title: 'Support Ticket Request',
        width: 650,
        height: 500,
        renderTo: Ext.getBody(),
        style: 'margin: 50px',
        items: [{
                xtype: 'container',
                layout: 'hbox',
                items: [{
                        xtype: 'textfield',
                        fieldLabel: 'First Name',
                        name: 'FirstName',
                        labelAlign: 'top',
                        cls: 'field-margin',
                        flex: 1
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Last Name',
                        name: 'LastName',
                        labelAlign: 'top',
                        cls: 'field-margin',
                        flex: 1
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Password',
                        name: 'Password',
                        labelAlign: 'top',
                        cls: 'field-margin',
                        flex: 1

                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Confirm Password',
                        name: 'ConfirmPassword',
                        labelAlign: 'top',
                        cls: 'field-margin',
                        flex: 1,
                        vtype: 'password',
                        firstPasswordFieldName: 'Password'
                    }
                ]
            },
            {
                xtype: 'container',
                layout: 'column',
                items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Email Address',
                        name: 'EmailAddress',
                        labelAlign: 'top',
                        cls: 'field-margin',
                        columnWidth: 0.6,
                        vtype: 'email'
                    }, {
                        xtype: 'fieldcontainer',
                        layout: 'hbox',
                        fieldLabel: 'Tel. Number',
                        labelAlign: 'top',
                        cls: 'field-margin',
                        columnWidth: 0.4,
                        items: [{
                                xtype: 'textfield',
                                name: 'TelNumberCode',
                                style: 'margin-right: 5px;',
                                vtype: 'telNumber', //custom type telephone number
                                flex: 2
                            }, {
                                xtype: 'textfield',
                                name: 'TelNumber',
                                flex: 4
                            }]
                    }]
            },
            {
                xtype: 'container',
                layout: 'hbox',
                items: [{
                        xtype: 'textarea',
                        fieldLabel: 'Request Details',
                        name: 'RequestDetails',
                        labelAlign: 'top',
                        cls: 'field-margin',
                        height: 250,
                        flex: 2
                    }, {
                        xtype: 'checkboxgroup',
                        name: 'RequestType',
                        fieldLabel: 'Request Type',
                        labelAlign: 'top',
                        columns: 1,
                        cls: 'field-margin',
                        vertical: true,
                        items: [{
                                boxLabel: 'Type 1',
                                name: 'type1',
                                inputValue: '1'
                            }, {
                                boxLabel: 'Type 2',
                                name: 'type2',
                                inputValue: '2'
                            }, {
                                boxLabel: 'Type 3',
                                name: 'type3',
                                inputValue: '3'
                            }, {
                                boxLabel: 'Type 4',
                                name: 'type4',
                                inputValue: '4'
                            }, {
                                boxLabel: 'Type 5',
                                name: 'type5',
                                inputValue: '5'
                            }, {
                                boxLabel: 'Type 6',
                                name: 'type6',
                                inputValue: '6'
                            }],
                        flex: 1
                    }]
            },
        ],
        buttons: [{
                text: 'Submit Form',
                handler: function() {
                    if (formPanel.getForm().isValid()) {

                        formPanel.getForm().submit({
                            url: 'submit.php',
                            success: function(form, action) {
                                Ext.Msg.alert('Success', action.result.message);
                            },
                            failure: function(form, action) {
                                if (action.failureType === Ext.form.action.Action.CLIENT_INVALID) {
                                    Ext.Msg.alert('CLIENT_INVALID', 'Something  has been missed. Please check and try again.');
                                }
                                if (action.failureType === Ext.form.action.Action.CONNECT_FAILURE) {
                                    Ext.Msg.alert('CONNECT_FAILURE', 'Status: ' + action.response.status + ': ' + action.response.statusText);
                                }
                                if (action.failureType === Ext.form.action.Action.SERVER_INVALID) {
                                    Ext.Msg.alert('SERVER_INVALID', action.result.
                                            message);
                                }
                            }
                        });
                    }
                }
            }]
    });



    //set data to first field
    new Ext.Button({
        renderTo: Ext.getBody(),
        text: 'Populating individual fields',
        handler: function() {
            var firstNameField = formPanel.items.get(0).items.get(0);
            firstNameField.setValue('Joe');
        }
    });

    new Ext.Button({
        renderTo: Ext.getBody(),
        text: 'Populating entire Form',
        handler: function() {
            var requestData = {
                FirstName: 'Joe',
                LastName: 'Bloggs',
                EmailAddress: 'info@swarmonline.com',
                TelNumberCode: '0777',
                TelNumber: '7777777',
                RequestDetails: 'This is some Request Detail body text',
                RequestType: {
                    type1: true,
                    type2: false,
                    type3: false,
                    type4: true,
                    type5: true,
                    type6: false
                }
            };

            formPanel.getForm().setValues(requestData);
        }
    });

    new Ext.Button({
        renderTo: Ext.getBody(),
        text: 'Populating specific fields',
        handler: function() {


            formPanel.getForm().setValues([{id: 'FirstName', value: 'Joe'}]);
        }
    });

    new Ext.Button({
        renderTo: Ext.getBody(),
        text: 'Populating a form from a Model instance',
        handler: function() {


            var requestData = {
                FirstName: 'Joe',
                LastName: 'Bloggs',
                EmailAddress: 'info@swarmonline.com',
                TelNumberCode: '0777',
                TelNumber: '7777777',
                RequestDetails: 'This is some Request Detail body text',
                RequestType: {
                    type1: true,
                    type2: false,
                    type3: false,
                    type4: true,
                    type5: true,
                    type6: false
                }
            };

            var requestModel = Ext.create('Request', requestData);
            Ext.define('Request', {
                extend: 'Ext.data.Model',
                fields: [
                    'FirstName',
                    'LastName',
                    'EmailAddress',
                    'TelNumberCode',
                    'TelNumber',
                    'RequestDetails',
                    'RequestType'
                ]
            });
            var requestModel = Ext.create('Request', requestData);

            formPanel.getForm().loadRecord(requestModel);
        }
    });
});
Awaiting for Administrator approval





Tags: Forms

← Back to list


Related Post




×