Form Panel
The 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 Field
is 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.VTypes
provides 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: [ ... ]});
BasicForm
submit
method 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:
- First find
BasicForm
a reference to the pair
- The method is called before committing to
isValid
ensure that each form field is filled in correctly
- 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