Common forms and Applications in Extjs

Objectives:
Know how to create a form panel
Measure the test taker's knowledge about the xtype application in the form panel.
Know how the form panel is verified, bound, and valid
Integrated Application Form Panel (fun with it)
Content:
First, we need to understand that FormPanel inherits the panel component. Therefore, it has panel attributes.
Creating a form panel is actually very simple var MyformPanel = new Ext. form. formpanel ();
The form panel appears as a container, just like the Panel. We need to use items to add various control elements to enrich our form panel,
Defaults: {}, which extracts the common attributes of each component item in items.

Xtype: it is very useful in form panel. There is no need to use new to create a component every time. It defines the type of the component and allows the component to be rendered after loading.Copy codeThe Code is as follows: form Ext. FormPanel
Checkbox Ext. form. Checkbox
Combo Ext. form. ComboBox
Datefield Ext. form. DateField
Field Ext. form. Field
Fieldset Ext. form. FieldSet
Hidden Ext. form. Hidden
Htmleditor Ext. form. HtmlEditor
Label Ext. form. Label
Numberfield Ext. form. NumberField
Radio Ext. form. Radio
Textarea Ext. form. TextArea
Textfield Ext. form. TextField
Timefield Ext. form. TimeField
Trigger Ext. form. TriggerField

Extjs provides powerful support for form verification. You can find it in the following examples.

Instance analysis:

1. Create a form panel

Copy codeThe Code is as follows: function Read2 (){
Ext. QuickTips. init ();
Var MyForm = new Ext. form. FormPanel ({
Title: 'form application ',
Width: 300,
X: 300,
Y: 50,
Floating: true,
Tools: [{id: 'close'}],
Frame: true,
BodyStyle: 'padding: 10px 0px 1px ',
LabelSeparator :':',
LabelAlign: 'right ',
RenderTo: Ext. getBody (), // Why can't 'id1' be used here'
Defaults: {xtype: 'textfield ', width: 150, allowBlank: false, msgTarget: 'day'}, // extract common attributes
Items :[
{
FieldLabel: 'user name ',
Name: 'username ',
Id: 'user ',
EmptyText: 'Enter the user name ',
BlankText: 'enter your username'
},
{
FieldLabel: 'user password ',
Name: 'userpassword ',
Id: 'Password ',
InputType: 'Password', // It also includes radiocheck text (default) filepassword, etc.
BlankText: 'Enter the password'

}

],
Buttons: [{text: "OK" },{ text: "canceled", handler: function () {alert ("event! ") ;}}],
ButtonAlign: 'center'

});
}

Note: renderTo: 'id1' when the form panel is invalid for a long time, I don't know what it is.

II. Application of Basic Forms (xtype is usually used to describe the types of Components in items)
Fieldset Application

Copy codeThe Code is as follows: function Read3 (){
Var MyformPanel = new Ext. form. FormPanel ({
Title: 'application of fieldset ',
RenderTo: Ext. getBody (),
Frame: true,
Width: 350,
X: 400,
Y: 50,
Floating: true,
Items :[
{
Xtype: 'fieldset ',
Title: 'user information ',
Collapsible: true,
AutoHeight: true,
AutoWidth: true,
Defaults: {width: 150, allowBlank: false, xtype: 'textfield '},
Items :[
{
FieldLabel: 'user name ',
EmptyText: 'chen Jianqiang ',
BlankText: 'Enter the user name'
},
{
FieldLabel: 'user password ',
InputType: 'Password ',
BlankText: 'enter your password'
}
]
}
]
});
}

Introduction to basic components in Form PanelCopy codeThe Code is as follows: function Read3 (){
2 Ext. QuickTips. init (); // initialize tips
3 Ext. apply (Ext. form. VTypes ,{
4 password: function (val, field) {// val refers to the value of the text box here, and field refers to the text box component. You need to understand this meaning.
5 if (field. confirmTo) {// confirmTo is our custom configuration parameter. It is generally used to save the id value of another component.
6 var pwd = Ext. get (field. confirmTo); // obtain the value of the id of confirmTo.
7 return (val = pwd. getValue ());
8}
9 return true;
}
});
Var MyformPanel = new Ext. form. FormPanel ({
Title: 'application of fieldset ',
RenderTo: Ext. getBody (),
Frame: true,
Width: 550,
X: 400,
Y: 50,
Draggable :{
InsertProxy: false, // when dragging, the original position is displayed without dotted lines.
OnDrag: function (e ){
Var pel = this. proxy. getEl ();
This. x = pel. getLeft (true );
This. y = pel. getTop (true); // obtain the panel coordinate when dragging
Var s = this. panel. getEl (). shadow;
If (s ){
S. realign (this. x, this. y, pel. getWidth (), pel. getHeight ());
}
},
EndDrag: function (e ){
This. panel. setPosition (this. x, this. y); // move to the final position
}
},
Plain: true,
Floating: true,
Items :[
{
Xtype: 'fieldset ',
CheckboxToggle: true,
CheckboxName: 'user ',
Title: 'user information ',
Collapsible: true,
AutoHeight: true,
AutoWidth: true,
LabelSeparator :':',
LabelAlign: 'right ',
LabelWidth: 70,
Defaults: {width: 150, allowBlank: false, xtype: 'textfield '},
Items :[
{
FieldLabel: 'user name ',
EmptyText: 'chen Jianqiang ',
Id: 'user ',
Name: 'username ',
BlankText: 'Enter the user name ',
Anchor: '000000'
},
{
FieldLabel: 'user password ',
InputType: 'Password', // password text checkbox rodio
Id: 'Password ',
Name: 'userpassword ',
Value: '20140901 ',
BlankText: 'enter your password ',
Anchor: '000000'
},
{
FieldLabel: 'Confirm password ',
Id: 'password2 ',
Name: 'userpassword2 ',
InputType: 'Password ',
Vtype: 'Password ',
VtypeText: 'inconsistent passwords entered twice ',
ConfirmTo: 'userpassword ',
Anchor: '000000'
},
{
Xtype: "datefield ",
FieldLabel: "Date of Birth ",
Anchor: "95%"
},
{
FieldLabel: 'blog of mine ',
Value: 'http: // www.cnblogs.com/chenjq0717 ',
Vtype: 'url ',
VtypeText: 'invalid url ',
Id1: 'myblog ',
Name: 'myblog ',
Anchor: '000000'
},
{
// Alpha can only contain letters and cannot contain other characters (such as numbers and special characters)
// 2. alphanum // only letters and numbers can be entered.
// 3. email // email verification, the required format is "langsin@gmail.com"
// 4.url// url format verification, the required format is http://www.langsin.com
FieldLabel: 'email address ',
Vtype: 'email ',
VtypeText: 'invalid mailbox ',
Name: 'email ',
Anchor: '000000'
},
{
Xtype: "panel ",
Layout: "column ",
FieldLabel: 'gender ',
IsFormField: true,
Items :[{
ColumnWidth:. 5,
Xtype: "radio ",
BoxLabel: "male ",
Name: "sex"
// InputValue
},{
ColumnWidth:. 5,
Checked: true,
Xtype: "radio ",
BoxLabel: "female ",
Name: "sex"
}]
},
{
Xtype: "panel ",
Layout: "column", // it can also be a table to implement multi-column layout
FieldLabel: 'hobbies ',
IsFormField: true, // very important; otherwise, fieldLabel is not displayed on the panel by default.
Items :[{
ColumnWidth:. 5, // The width is 50%
Xtype: "checkbox ",
BoxLabel: "soccer", // text displayed on the right of the check box
Name :""
},{
ColumnWidth:. 5,
Xtype: "checkbox ",
BoxLabel: "basketball ",
Name :""
}]
},
{
Xtype: 'combo ',
FieldLabel: 'user hometown ',
Name: 'Family ',
Store: <% = getfamilyData () %>, // call the background variable
EmptyText: 'select hometown'
},
{
Xtype: "htmleditor ",
Id: "myinfo ",
FieldLabel: "personal instructions ",
Anchor: "99%"
}
]
}
]
});
}

Submit Form data to server submit

Submit: function (){
This. getEl (). dom. action = 'mypages/GetForm. aspx ', // the page to be switched after submission
This. getEl (). dom. method = 'post', // submission method
This. getEl (). dom. submit (); // execute submit
},

Add and submit button

Buttons: [{text: "OK", handler: login, formBind: true}, {text: "cancel", handler: reset}]

Add submission method:

Function login (){
MyformPanel. form. submit (); // submit
}
Function reset (){
MyformPanel. form. reset (); // cancel
}

Code for this lesson:
Comprehensive application of Form PanelCopy codeThe Code is as follows: <% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Ext7.aspx. cs" Inherits = "EXT1.Ext7" %>
2
3 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 6 7 <title> Lesson 7: common forms and Applications in Extjs </title>
8 <link href = "ext-3.2.0/resources/css/ext-all.css" rel = "stylesheet" type = "text/css"/>
9 <script src = "ext-3.2.0/adapter/ext/ext-base.js" type = "text/javascript"> </script>
<Script src = "ext-3.2.0/ext-all.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Function Read1 (){
Ext. QuickTips. init ();
Var MyForm = new Ext. form. FormPanel ({
Title: 'form application ',
Width: 300,
Height: 200,
X: 300,
Y: 50,
Floating: true,
Tools: [{id: 'close'}],
Draggable :{
InsertProxy: false, // when dragging, the original position is displayed without dotted lines.
OnDrag: function (e ){
Var pel = this. proxy. getEl ();
This. x = pel. getLeft (true );
This. y = pel. getTop (true); // obtain the panel coordinate when dragging
Var s = this. panel. getEl (). shadow;
If (s ){
S. realign (this. x, this. y, pel. getWidth (), pel. getHeight ());
}
},
EndDrag: function (e ){
This. panel. setPosition (this. x, this. y); // move to the final position
}
},
Frame: true,
LabelSeparator :':',
LabelAlign: 'right ',
RenderTo: Ext. getBody (), // Why can't 'id1' be used here'
Items :[
New Ext. form. TextField ({
FieldLabel: 'user name ',
AllowBlank: false,
BlankText: 'Enter the user name ',
MsgTarget: 'day'
}),
New Ext. form. TextField ({
FieldLabel: 'user password ',
AllowBlank: false,
InputType: 'Password ',
BlankText: 'Enter the password ',
MsgTarget: 'day'
})
]
});
}
Function Read2 (){
Ext. QuickTips. init ();
Var MyForm = new Ext. form. FormPanel ({
Title: 'form application ',
Width: 300,
X: 300,
Y: 50,
Floating: true,
Tools: [{id: 'close'}],
Frame: true,
BodyStyle: 'padding: 10px 0px 1px ',
LabelSeparator :':',
LabelAlign: 'right ',
Draggable :{
InsertProxy: false, // when dragging, the original position is displayed without dotted lines.
OnDrag: function (e ){
Var pel = this. proxy. getEl ();
This. x = pel. getLeft (true );
This. y = pel. getTop (true); // obtain the panel coordinate when dragging
Var s = this. panel. getEl (). shadow;
If (s ){
S. realign (this. x, this. y, pel. getWidth (), pel. getHeight ());
}
},
EndDrag: function (e ){
This. panel. setPosition (this. x, this. y); // move to the final position
}
},
RenderTo: Ext. getBody (), // Why can't 'id1' be used here'
Defaults: {xtype: 'textfield ', width: 150, allowBlank: false, msgTarget: 'day'}, // extract common attributes
Items :[
{
FieldLabel: 'user name ',
Name: 'username ',
Id: 'user ',
EmptyText: 'Enter the user name ',
BlankText: 'enter your username'
},
{
FieldLabel: 'user password ',
Name: 'userpassword ',
Id: 'Password ',
InputType: 'Password ',
BlankText: 'Enter the password'
}
],
Buttons: [{text: "OK" },{ text: "canceled", handler: function () {alert ("event! ") ;}}],
ButtonAlign: 'center'
});
}
Function Read3 (){
Ext. QuickTips. init (); // initialize tips
Ext. apply (Ext. form. VTypes ,{
Password: function (val, field) {// val refers to the value of the text box. field refers to the text box component.
If (field. confirmTo) {// confirmTo is our custom configuration parameter. It is generally used to save the id value of another component.
Var pwd = Ext. get (field. confirmTo); // gets the value of the id of confirmTo.
Return (val = pwd. getValue ());
}
Return true;
}
});
Var MyformPanel = new Ext. form. FormPanel ({
Title: 'application of fieldset ',
RenderTo: Ext. getBody (),
Frame: true,
Width: 550,
X: 400,
Y: 50,
Draggable :{
InsertProxy: false, // when dragging, the original position is displayed without dotted lines.
OnDrag: function (e ){
Var pel = this. proxy. getEl ();
This. x = pel. getLeft (true );
This. y = pel. getTop (true); // obtain the panel coordinate when dragging
Var s = this. panel. getEl (). shadow;
If (s ){
S. realign (this. x, this. y, pel. getWidth (), pel. getHeight ());
}
},
EndDrag: function (e ){
This. panel. setPosition (this. x, this. y); // move to the final position
}
},
Submit: function (){
This. getEl (). dom. action = 'mypages/GetForm. aspx ',
This. getEl (). dom. method = 'post ',
This. getEl (). dom. submit ();
},
Plain: true,
Floating: true,
Items :[
{
Xtype: 'fieldset ',
CheckboxToggle: true,
CheckboxName: 'user ',
Title: 'user information ',
Collapsible: true,
AutoHeight: true,
AutoWidth: true,
LabelSeparator :':',
LabelAlign: 'right ',
LabelWidth: 70,
Defaults: {width: 150, allowBlank: false, xtype: 'textfield '},
Items :[
{
FieldLabel: 'user name ',
// EmptyText: 'chen Jianqiang ',
Id: 'user ',
Name: 'username ',
BlankText: 'Enter the user name ',
Anchor: '000000'
},
{
FieldLabel: 'user password ',
InputType: 'Password', // password text checkbox rodio
Id: 'Password ',
Name: 'userpassword ',
Value: '20140901 ',
BlankText: 'enter your password ',
Anchor: '000000'
},
{
FieldLabel: 'Confirm password ',
Id: 'password2 ',
Name: 'userpassword2 ',
InputType: 'Password ',
Vtype: 'Password ',
VtypeText: 'inconsistent passwords entered twice ',
ConfirmTo: 'userpassword ',
Anchor: '000000'
},
{
Xtype: "datefield ",
FieldLabel: "Date of Birth ",
Anchor: "95%"
},
{
FieldLabel: 'blog of mine ',
Value: 'http: // www.cnblogs.com/chenjq0717 ',
Vtype: 'url ',
VtypeText: 'invalid url ',
Id1: 'myblog ',
Name: 'myblog ',
Anchor: '000000'
},
{
// Alpha can only contain letters and cannot contain other characters (such as numbers and special characters)
// 2. alphanum // only letters and numbers can be entered.
// 3. email // email verification, the required format is "langsin@gmail.com"
// 4.url// url format verification, the required format is http://www.langsin.com
FieldLabel: 'email address ',
Vtype: 'email ',
VtypeText: 'invalid mailbox ',
Name: 'email ',
Anchor: '000000'
},
{
Xtype: "panel ",
Layout: "column ",
FieldLabel: 'gender ',
IsFormField: true,
Items :[{
ColumnWidth:. 5,
Xtype: "radio ",
BoxLabel: "male ",
Name: "sex"
// InputValue
},{
ColumnWidth:. 5,
Checked: true,
Xtype: "radio ",
BoxLabel: "female ",
Name: "sex"
}]
},
{
Xtype: "panel ",
Layout: "column", // it can also be a table to implement multi-column layout
FieldLabel: 'hobbies ',
IsFormField: true, // very important; otherwise, fieldLabel is not displayed on the panel by default.
Items :[{
ColumnWidth:. 5, // The width is 50%
Xtype: "checkbox ",
BoxLabel: "soccer", // text displayed on the right of the check box
Name :""
},{
ColumnWidth:. 5,
Xtype: "checkbox ",
BoxLabel: "basketball ",
Name :""
}]
},
{
Xtype: 'combo ',
FieldLabel: 'user hometown ',
Name: 'Family ',
Store: <% = getfamilyData () %>, // call the background variable
EmptyText: 'select hometown'
},
{
Xtype: "htmleditor ",
Id: "myinfo ",
FieldLabel: "personal instructions ",
Anchor: "99%"
}
]
}
],
Buttons: [{text: "OK", handler: login, formBind: true}, {text: "cancel", handler: reset}]
});
Function login (){
MyformPanel. form. submit (); // submit
}
Function reset (){
MyformPanel. form. reset (); // cancel
}
}
Ext. onReady (Read3 );
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div id = "id1">
</Div>
</Form>
</Body>
<Script type = "text/javascript">
</Script>
</Html>