Form in ExtJs)

Form in ExtJs)
-- Form and Form BasicExtjs Form and Form Basic are two things. Form provides interface display, while Form Basic provides functions such as data processing and verification. Each Form Panel is bound to a Form Basic when it is created. We can get it through the getForm method:

Form. getForm ()

In terms of API, the config of Form Basic is not shown in the config of Form, but the config of Form Basic is fully valid in the config of Form. That is to say, when Extjs Form is used, you must not only view the Form API documentation, but also the relevant Form Basic documentation.
Create an Extjs Form Control

Var form = Ext. create ("Ext. form. Panel ",{
Width: 500,
Height: 300,
Margin: 20,
Title: "Form ",
RenderTo: Ext. getBody (),
Collapsible: true, // foldable
AutoScroll: true, // automatically create a scroll bar
DefaultType: 'textfield ',
Defaults :{
Anchor: '20140901 ',
},
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: "age", decimalPrecision: 0, vtype: "age "}
]
},
{
Xtype: "container ",
Layout: "hbox ",
Items :[
{Xtype: "textfield", name: "phone", fieldLabel: "phone", allowBlank: false, emptyText: "phone or mobile phone number "},
{Xtype: "textfield", name: "phone", fieldLabel: "Email", allowBlank: false, emptyText: "email address", vtype: "Email "}
]
},
{
Xtype: "textareafield ",
Name: "remark ",
FieldLabel: "Remarks ",
Height: 50
}
],
Buttons :[
{Xtype: "button", text: "save "}
]
});


-- Extjs Form layout is in Extjs Form. The default layout is layout: 'anchor'
By default, anchor only displays one control in each row. To display multiple controls in one row, you need to put these controls in a container and set layout of the container to hbox.

-- The Extjs Form can load Model data or Json data, so that we can conveniently display json or record data in the Extjs Form control.
Load Record Data

Extjs Form loads a record using the loadRecord method. The Code is as follows:

Var userRecord = Ext. create ("MyApp. model. User ",{
Name: "Tom ",
Age: 25,
Phone: 123456"
});

Form. loadRecord (userRecord );

Load Json data

Extjs Form can load json data by calling the setValues method of formbasic. The Code is as follows:

Var data = {
Name: "Tom ",
Age: 25,
Phone: 123456"
};
Form. getForm (). setValues (data );

-- Extjs Form: Through the above method, we can load record or json data for Form. After editing, you also need to obtain the edited data or update the edited data to the corresponding record. Extjs Form provides the corresponding methods to complete these operations.

If Extjs Form loads record:

Form. updateRecord ();

If Extjs Form loads json data:

Form. getForm (). getValues ()

Extjs Form asynchronous loading and submission

In addition to loading existing data on the page, Extjs Form can also asynchronously load and submit data through Ajax. This method is not commonly used.
Asynchronous loading

Form. getForm (). load ({
Url: form-data.ashx"
});

The data format returned by the server is as follows:

{
Success: true,
Data :{
Name: "Tom ",
Age: 25,
Phone: 123456"
}
}

Asynchronous submission

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

The data submitted by the submit method is all values in Form and can be obtained on the server side.


-- Extjs Form verification is indispensable in all development languages. Extjs Form also provides a client verification mechanism. We can use vtype to implement client verification. Next, let's take a closer look at Extjs client verification.
Required. It cannot be empty (allowBlank)

Not empty
{
Xtype: "textfield ",
Name: "UserName ",
FieldLabel: "User Name ",
AllowBlank: false,
Flex: 1
}

Length limit
{
Xtype: "textfield ",
Name: "UserName ",
FieldLabel: "User Name ",
AllowBlank: false,
MaxLength: 10,
MinLength: 3,
Flex: 1
}

Email
{
Xtype: "textfield ",
Name: "Email ",
FieldLabel: "Email ",
Vtype: "email ",
Flex: 1
}

Custom xtype
// Verify the IP address
Ext. apply (Ext. form. field. VTypes ,{
IPAddress: function (v ){
Return/^ \ d {1, 3} \. \ d {1, 3} \. \ d {1, 3} \. \ d {1, 3} $/. test (v );
},
IPAddressText: 'Only IP address ',
IPAddressMask:/[\ d \.]/I
});
{
Xtype: "textfield ",
Name: "ip ",
FieldLabel: "ip address ",
Vtype: "IPAddress"
}


Supplement: Ext-DOMExt. Element (almost completely encapsulates everything in DOM)
1. Ext. get (Ext. Element. get) uses a caching mechanism to improve DOM node acquisition efficiency. The returned result is Ext. Element ()
First, go to the cache and find it. If there is a direct return in the cache, then go to the page to find it.
If the page does not return null, add the current content to the cache.
Var d1 = Ext. get ('d1 ');
Alert (d1.dom. innerHTML );

2. Ext. fly (Ext. Element. fly) uses the classic metadata mode to save memory and reduce carbonization.
The returned Fly object can be understood as an Ext. Element Object.
Var d2 = Ext. get ('d2 ');
Var d3 = Ext. get ('d3 '); // because the metadata mode is used, it is only suitable for one operation to save memory.
D2.dom. innerHTML = 'aaa ';
D3.dom. innerHTML = 'bbb ';

3. Ext. getDom () returns the HTMLElement directly.

Ext. DomHelper (which is a powerful tool class for operating the UI)
Ext .. DomQuery (used to query DOM nodes)