ExtJS Form Usage Explanation

ExtJS form is a more commonly used control for displaying and editing data, and today This article describes the detailed use of the ExtJS form control, including creating a form, adding children, loading and updating data, validating, and so on.

The sample code for this article applies to ExtJS 4.x and ExtJS 5.x, and is available in ExtJS 4.2.1 and ExtJS 5.0.1!

This article by Fei Qi ( [email protected] ) original, and posted in Http://www.qeefee.com/article/extjs-form-in-detail , reproduced please specify the source! Recommended more ExtJS tutorials ,Extjs5 Tutorials

Form and Form Basic

ExtJS form and form Basic are two things, form provides a display of the interface, and form basic provides data processing, validation and other functions. Each form panel, when created, binds a form Basic, which we can get by means of the GetForm:

Form.getform ()

In the API aspect, form Basic's config is not shown in the config of the list, but the config of form Basic is fully valid in the config of the form, that is, when we use the ExtJS form, Not only to view the form's API documentation, but also to navigate through the relevant form basic documentation.

Create a ExtJS form control

varform = Ext.create ("Ext.form.Panel", {width:500, Height:300, margin:20, Title:"Form", RenderTo:Ext.getBody (), Collapsible:true,//foldableAutoScroll:true,//automatically create scroll barsDefaultType: ' TextField ', defaults: {anchor:' 100% ',}, Fielddefaults: {labelwidth:80, LabelAlign:"Left", Flex:1, margin:5}, items: [{xtype:"Container", layout:"Hbox", items: [{xtype:"TextField", Name: "Name", Fieldlabel: "Name", Allowblank:false}, {xtype:"Numberfield", Name: "Age", Fieldlabel: "Old", decimalprecision:0, VType: "Ages"}]}, {xtype:"Container", layout:"Hbox", items: [{xtype:"TextField", Name: "Phone", Fieldlabel: "Telephone", Allowblank:false, Emptytext: "Phone or mobile number"}, {xtype:"TextField", Name: "Phone", Fieldlabel: "Mailbox", Allowblank:false, Emptytext: "Email Address", VType: "Email"}]}, {xtype:"Textareafield", Name:"Remark", Fieldlabel:Notes, Height:50}], buttons: [{xtype:"Button", Text: "Save" }    ]});

The above code will create a form form with the following effect:

ExtJS form Layout

In the ExtJS form, the default layout is layouts: ' anchor ', the specific ExtJS layout can refer to my ExtJS layout system detailed this article.

Anchor the default is to display only one control per line, if we want to display more than one row, you need to place the controls in a container, and set the layout of container to Hbox.

ExtJS Form Loading Data

The form can load the model data, or it can load JSON data so that we can easily display the JSON or record data in the ExtJS form control.

Load Record Data

The ExtJS form loads the record by means of Loadrecord, with the following code:

var userrecord = ext.create ("MyApp.model.User", {    "Tom    ",    " 123456 "}); Form.loadrecord (Userrecord);

Loading JSON data

ExtJS form can load JSON data by calling Formbasic's Setvalues method, as follows:

var data = {    "Tom    ",    "123456"};form.getform (). Setvalues (data);

ExtJS form GET and update data

Using the method above, we can load the record or JSON data for the form. After we have finished editing, we also need to obtain the edited data, or to update the edited data to the corresponding record, ExtJS form provides the appropriate method to complete these operations.

If the ExtJS form is loaded with a record:

Form.updaterecord ();

If the ExtJS form is loaded with JSON data:

Form.getform (). GetValues ()

ExtJS form asynchronous load and commit

In addition to loading data that already exists in the page, the ExtJS form can asynchronously load and submit data in an AJAX manner. This method is less common.

Asynchronous loading

form.getform (). Load ({    "form-data.ashx"});

The data format returned by the server is as follows:

{    success:true,    data:{        "Tom",        123456         "    }}

Asynchronous commit

form.submit ({    "form-submit.ashx",    function  (form, action) {        Ext.Msg.alert (' Success ', action.result.msg);    });

The data submitted by the Submit method is all value in the form and can be obtained on the server side.

This article by Fei Qi ([email protected]) original, and published in Http://www.qeefee.com/article/extjs-form-in-detail, reproduced please indicate the source! Recommended more ExtJS tutorials, Extjs5 tutorials

ExtJS Form Validation

In all development languages, client-side validation is essential. The ExtJS form also provides a client-side validation mechanism that we can use VType to implement client-side validation. Next, we'll look at the client-side validation of ExtJS in detail.

Required, that is, cannot be empty (Allowblank)

Effect:

Code:

{    "TextField",    "UserName",    "username",    false,     1}

Input length limit, maxlength/minlength

Effect:

&

Code:

{    "TextField",    "UserName",    "username",    false,     Ten,    3,    1}

Value size limit, Maxvalue/minvalue

The limit of value size is commonly used in Numberfield, Datefield, and you can specify a range of available values.

Effect:

&

Code:

{    "Numberfield",    "age"    , "ages",             1}

VType Verification

VType provides a number of common authentication types, which include:

• Alpha: Greek numerals
• Alphanum: Letters and Numbers
• Email: e-mail address
• URL: url

These four kinds of ExtJS are built-in and have been provided for us to use directly. We'll take an email for an example.

Effect:

Code:

{    "TextField",    "email"        , "email", "    Email", 1 }

The simple usage of vtype is described above, and it can be seen that this kind of verification is very useful, but the small partners do not think ExtJS provide too little vtype?

Small friends do not abandon, next we look at how to customize the VType, code:

// Verify IP Address ext.apply (Ext.form.field.VTypes, {    function  (v) {        return /^\d{1,3}\.\d {1,3}\.\d{1,3}\.\d{1,3}$/. Test (v);    },    ' only enter IP address ',    /[\d\.] /i});

Usage:

{    "TextField",    "IP"    , "IP Address",    "IPAddress"} 

Effect:

This article by Fei Qi ( [email protected] ) original, and posted in Http://www.qeefee.com/article/extjs-form-in-detail , reproduced please specify the source! Recommended more ExtJS tutorials ,Extjs5 Tutorials

ExtJS Form Usage Explanation