ExtJS 4 Form

Form PanelThe form panel is the normal panel that Panel adds the ability to form processing. The form panel can be used wherever the user submits data needs to be collected. The form panel can be used to Container Layout provide the simplest way to visit a form control. The form panel can and Model binds to facilitate loading and saving of data. In fact, the form panel wraps the Basic Form component, which Basic Form handles all form control management, validation, submission, and loading data. This means that all Basic Form configuration options that can be received can be used directly on a single side of the table. Basic Form Panel

Let's start by demonstrating a simple form to collect user data:

Ext.create(‘Ext.form.Panel‘, {    renderTo: Ext.getBody(),    title: ‘User Form‘,    height: 130,    width: 280,    bodyPadding: 10,    defaultType: ‘textfield‘,    items: [        {            fieldLabel: ‘First Name‘,            name: ‘firstName‘        },        {            fieldLabel: ‘Last Name‘,            name: ‘lastName‘        },        {            xtype: ‘datefield‘,            fieldLabel: ‘Date of Birth‘,            name: ‘birthDate‘        }    ]});

This form renders itself to document.body and has three form fields-"First name", "Last Name", and "Date of Birth", and form fields are added fieldLabel through the items configuration of the form panel. Configure the text label next to the form field to name Configure the true HTML form field for the form field name . Note The default Type property of the table single-sided board defaultType is TextField. All form fields that are not specified in a single-sided panel xtype will be treated as TextField, such as first Name and last name,date of Birth in the example by xtype designation Date Field . Date Fieldis a control that provides a marquee for a date. Fields form Field field types type

ExtJS provides a standard set of fields that Ext.form.field can be used in a single-sided panel of a table in a namespace. Refer to the API documentation for details

• Ext.form.field.Checkbox
• Ext.form.field.ComboBox
• Ext.form.field.Date
• Ext.form.field.Display
• Ext.form.field.File
• Ext.form.field.Hidden
• Ext.form.field.HtmlEditor
• Ext.form.field.Number
• Ext.form.field.Radio
• Ext.form.field.Text
• Ext.form.field.TextArea
• Ext.form.field.Time

Validation Checksum 1. Built-in validations built-in checksum

Each form field in the ExtJS has a built-in checksum, and some fields have built-in rules. For example, if a value that cannot be converted to a date type is entered into a Date field, the x-form-invalid-field CSS class is added to the HTML structure of the field to highlight errors on the field, and this CSS class can be customized by the field invalidCls . The default style is a red box:

Fields with errors also display an error message, and the default method is tips

You can change the msgTarget display location of the error message by changing the contents of the error message, and invalidText each field has its own invalidText implementation, and there are many replaceable tags in the error message. For example, in date field invalidText , any ' {0} ' will be replaced with the value of this field, ' {1} ' will be replaced by this field format , the following code shows how to use this feature to customize the error message

{    xtype: ‘datefield‘,    fieldLabel: ‘Date of Birth‘,    name: ‘birthDate‘,    msgTarget: ‘under‘, // location of the error message    invalidText: ‘"{0}" bad. "{1}" good.‘ // custom error message text}

2. Custom validations Customized Calibration

Sometimes built-in checksums do not meet demand. The simplest way to do this is to implement a custom check, use Text Field the regex configuration to apply a validation rule, and use the maskRe configuration restrictions to enter the characters, which has an example of using the TextField check input time:

{    fieldLabel: ‘Last Login Time‘,    name: ‘loginTime‘,    regex: /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i,    maskRe: /[\d\s:amp]/i,    invalidText: ‘Not a valid time.  Must be in the format "12:34 PM".‘}

The above method works well for a single field, but it is not very convenient if there are many fields in the application that require the same check method. Ext.form.field.VTypesprovides a solution through which you can create a reusable validator that shows how to create a time validator:

// custom Vtype for vtype:‘time‘var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;Ext.apply(Ext.form.field.VTypes, {    //  vtype validation function    time: function(val, field) {        return timeTest.test(val);    },    // vtype Text property: The error text to display when the validation function returns false    timeText: ‘Not a valid time.  Must be in the format "12:34 PM".‘,    // vtype Mask property: The keystroke filter mask    timeMask: /[\d\s:amp]/i});

Once the custom validator is created, the form fields can be called by vtype configuration:

{    fieldLabel: ‘Last Login Time‘,    name: ‘loginTime‘,    vtype: ‘time‘}

Handling data processing submitting a form how to submit a form

The simplest way to submit data to the server is to set BasicForm the url configuration, because the Form Panel package BasicForm , the URL is directly configured to Form Panel also, it will pass BasicForm through.

Ext.create(‘Ext.form.Panel‘, {    ...    url: ‘add_user‘,    items: [        ...    ]});

BasicFormsubmitmethod to commit the data to the configuration url :

Ext.create(‘Ext.form.Panel‘, {    ...    url: ‘add_user‘,    items: [        ...    ],    buttons: [        {            text: ‘Submit‘,            handler: function() {                var form = this.up(‘form‘).getForm(); // get the basic form                if (form.isValid()) { // make sure the form contains valid data before submitting                    form.submit({                        success: function(form, action) {                           Ext.Msg.alert(‘Success‘, action.result.msg);                        },                        failure: function(form, action) {                            Ext.Msg.alert(‘Failed‘, action.result.msg);                        }                    });                } else { // display error alert if the data is invalid                    Ext.Msg.alert(‘Invalid Data‘, ‘Please correct form errors.‘)                }            }        }    ]});

In the above example, the button configures a handler function to handle the form submission, and the following actions are done in the handler function:

1. First find BasicForm a reference to the pair
2. The method is called before committing to isValid ensure that each form field is filled in correctly
3. Finally, the submit method is called, and two callback functions are passed, success and failure in the parameters of the two callback functions, action.result you can refer to the parsed object of the server side return JSON

Like in the example of a form submission, expect the server side to return a value that should look like this:

1

{ "success": true, "msg": "User added successfully" }

Binding a form to a model how to bind forms and models

In ExtJS, models are used to define various data, and to load and save data to the server. For example, a user model needs to define the user's field, and it can also set the proxy to load and save the data:

Ext.define(‘User‘, {    extend: ‘Ext.data.Model‘,    fields: [‘firstName‘, ‘lastName‘, ‘birthDate‘],    proxy: {        type: ‘ajax‘,        api: {            read: ‘data/get_user‘,            update: ‘data/update_user‘        },        reader: {            type: ‘json‘,            root: ‘users‘        }    }});

For more on the model, see <extjs 4 Data (package) detailed >

Data can be loadRecord entered directly from the load via the method Model Form Panel :

Ext.ModelMgr.getModel(‘User‘).load(1, { // load user with ID of "1"    success: function(user) {        userForm.loadRecord(user); // when user is loaded successfully, load the data into the form    }});

Finally, instead of the submit method, you can use BasicForm the updateRecord method to update the model of the form binding and then save the data using the model save method:

Ext.create (' Ext.form.Panel ', {... URL: ' Add_user ', items: [...], buttons: [{t                     Ext: ' Submit ', handler:function () {var form = this.up (' form '). GetForm (),//Get the basic form Record = Form.getrecord ();  Get the underlying model instance if (Form.isvalid ()) {//Make sure the form contains valid data before Submitting Form.updaterecord (record);                        Update the record with the form data record.save ({//Save the record to the server                        Success:function (user) {Ext.Msg.alert (' success ', ' User saved successfully. ') }, Failure:function (user) {Ext.Msg.alert (' failure ', ' Fa                        iled to save user. ')                }                    }); } else {//Display Error alert If the data is invalid ext.msG.alert (' Invalid Data ', ' please correct form errors. ') }            }        }    ]});

Layouts form Layout

ExtJS the size and position of the application Layout management component, Form Panel you can apply any Container Layout , see <extjs 4 layouts and containers for more information about layouts >

For example, you can apply a layout by visiting form fields Sideways HBox :

Ext.create(‘Ext.form.Panel‘, {    renderTo: Ext.getBody(),    title: ‘User Form‘,    height: 100,    width: 515,    defaults: {        xtype: ‘textfield‘,        labelAlign: ‘top‘,        padding: 10    },    layout: {        type: ‘hbox‘    },    items: [        {            fieldLabel: ‘First Name‘,            name: ‘firstName‘        },        {            fieldLabel: ‘Last Name‘,            name: ‘lastName‘        },        {            xtype: ‘datefield‘,            fieldLabel: ‘Date of Birth‘,            name: ‘birthDate‘        }    ]});

ExtJS 4 Form