Introduction to various components of Ext. form. Panel form Panel

1. Main form components supported by Ext. form. FormPanel

ExtJS form component description Xtype
Ext. form. field. CheckBox check box checkboxfield
Ext. form. CheckBoxGroup check box group checkboxgroup
Ext. form. field. ComboBox drop-down list box combo
Ext. form. field. Date selection box datefield
Ext. form. field. Display text Display component displayfield
Ext. form. field. FieldContainer field container fieldcontainer
Ext. form. field. FieldSet field set fieldset
Ext. form. field. Hidden hides the hiddenfield field.
Ext. form. field. HtmlEditer HTML text editor htmleditor
Ext. form. Label label Label field label
Ext. form. field. Number: numberfield
Ext. form. field. Radio single-sector radio
Ext. form. RadioGroup single-region group radiogroup
Ext. form. field. Spinner fine-tuning component spinnerfield
Ext. form. field. TextArea multi-line text box textareafield
Ext. form. field. Text single-line Text box textfield
Ext. form. field. Time Selection box timefield
Ext. form. field. Trigger button text box triggerfield
Ext. form. field. File text box upload field filefield

2. Ext. form. Panel mainly configures the project table

Configuration item type description
Buttons Array a button (Ext. Button. button) to configure the object Array. The Button will be added to the form footer.
Layout String form layout
The minimum width of the minButtonWidth Number form button. The default value is 75px.
PollForChanges Boolean checks whether the form value changes cyclically
The time interval between pollInterval Number and the form value. The default value is 500 ms.
Items Mixed an array of child or child elements
Title String form title

3. Common Ext. form. FormPanel method table

Method Name Description
CheckChange: void forcibly checks whether each form field has changed
GetForm (): Ext. form. BasicForm: Get the basic form object corresponding to the form panel.
Load (Object options): void loads the Form Content
StartPolling (Number interval): void starts to cyclically check whether the form value has changed

Parameter description:

Interval: cycle check time, in ms
 
StopPolling: void stops the built-in tasks started by startPolling.
Submit (Object options): void submits the Form Content

4. Ext. form. field. Base mainly configures the project table.

Configuration item type description
DirtyCls String sets the style after the form value is modified.
FieldCls String sets the form field style. The default value is "x-form-field"
FocusCls String specifies the style when the form field obtains the focus. The default value is "x-form-focus"
Unique id of the String control. By default, the system automatically generates a unique id.
The inputId String id will be applied to the generated input element. By default, this id is automatically generated. If you manually configure the id, you must ensure the uniqueness of this id.
Display text when invalidText String is set to an invalid form value and no information is provided
InputType String field type. The default value is text.
Name String field name. The default value is undefined.
ReadOnly Boolean sets whether the field is read-only. The default value is false.
Mixin: Ext. form. field. Field
If the value of disabled Boolean is true, the component is disabled. The default value is false. Components in disabled state will not be submitted
SubmitValue Boolean sets whether to submit the form value when the form field is not disabled. The default value is true.
ValidateOnChange Boolean sets whether to verify the validity immediately when the value changes. The default value is true.
Value Mixed field initialization value
Mixing: Ext. form. Labelable
ActiveError String if this value is set, this value will be displayed as an error message when the component is rendered for the first time. The default value is undefined. After the component is created, you can use setActiveError and unsetActiveError to modify it.
ActiveErrorTpl Ext. XTemplate error message template
If autoFitErrors Boolean is set to true, the range of the component body is automatically adjusted to display the "side" or "under" status error information within the range of the component. The default value is true.
FieldLabel String sets the field label, which will be added together with labelSeparator. Its position and size are determined by labelAlign, labelWidth, and labelPad configuration items. The default value is undefined.
If hideEmptyLabel Boolean is set to true, labels with empty content are completely hidden.
If hideLabel Boolean is set to true, form tags (fieldLabel and labelSeparator) are completely hidden. The default value is false.
LabelAlign String sets the position of the form label filedLabel,

Valid value: left:

The label is on the left of the field. Top:

Label on the field.

Right: The label is on the right of the field.
 
LabelPad Number sets the gap between the form tag and the form field value. The default value is 5px.
LabelSeparator String sets the separator between form tags and form fields
LabelStyle String sets a style String that is directly applied to tag elements. The default value is undefined.
LabelWidth Number is used to set the label width of a form. It takes effect only when labelAlign is set to "left" or "right". The default value is 100px.
LabelableRenderTpl Array/String/Ext. Template form tag Template
MsgTarget String,

Valid values include:

Qtip: displays a floating message.

Title: displays a browser floating prompt message

Under: displays a prompt message under the field

Side: a prompt message is displayed on the right of the field.

None: No prompt message is displayed.

[Element id]: directly add the error message to the innerHTML attribute of the specified element.
 
PreventMark Boolean true: no error message is displayed. The default value is false.

5. Simple instances

Code:

[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> Ext. form. Panel </title>
<Link href = "ext-4.0.7-gpl/resources/css/ext-all.css" rel = "stylesheet" type = "text/css"/>
<Script src = "ext-4.0.7-gpl/bootstrap. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Ext. onReady (function (){
Ext. QuickTips. init ();
Var form = new Ext. form. Panel ({
Title: "form ",
Height: 120,
Width: 200,
Frame: true,
Collapsible: true,
RenderTo: Ext. getBody (),
Defaults :{
AutoFitErrors: "false ",
LabelSeparator :":",
LabelWidth: 50,
Width: 150,
AllowBlank: false,
BlankText: "required ",
MsgTarget: "qtip"
},
Items :[{
Xtype: "textfield ",
FieldLabel: "name"
},{
Xtype: "numberfield ",
FieldLabel: "Age"
}]
});
});
</Script>
</Head>
<Body style = "margin: 30px">
</Body>
</Html>