Extjs2.0 Learning Series (4)-Ext. formpanel

In the previous article, we discussed the simple use of Ext. Window. Today we will look at the powerful formpanel, which also inherits the use of panel components.
First, find out the problem:

// ViewSource codeThe two methods are the same.
Ext. Form. formpanel = Ext. formpanel;

From the simplestCodeStart the instance:

<! -- HTML code -->
< Body >
< Div ID = "Form1" > </ Div >
</ Body >

 

// JS Code
VaR Form1 =   New Ext. Form. formpanel ({
Width: 350 ,
Frame: True , // Rounded corner and light blue background
Renderto: " Form1 " , // Rendering
Title: " Formpanel " ,
Bodystyle: " Padding: 5px 5px 0 " ,
Items :[
{
Fieldlabel: " Username " , // Text Box title
Xtype: " Textfield " , // Form text box
Name: " User " ,
ID: " User " ,
Width: 200
},
{
Fieldlabel: " Password " ,
Xtype: " Textfield " ,
Name: " Pass " ,
ID: " Pass " ,
Width: 200
}
],
Buttons: [{text: " OK " }, {Text: " Cancel " , Handler: Function () {Alert ( " Event! " ) ;}}]
});

All elements of the form are added to the form through the items attribute parameters.
We found that the two text boxes have the same type and madness. We can also extract the same items in items to simplify the Code:

// Simplified code, same as the code above
VaR Form1 =   New Ext. Form. formpanel ({
Width: 350 ,
Frame: True ,
Renderto: " Form1 " ,
Title: " Formpanel " ,
Bodystyle: " Padding: 5px 5px 0 " ,
Defaults: {width: 200 , Xtype: " Textfield " }, // ****** Simplified ****//
Items :[
{
Fieldlabel: " Username " ,
// Xtype: "textfield ",
Name: " User " ,
ID: " User " ,
// Width: 200
},
{
Fieldlabel: " Password " ,
// Xtype: "textfield ",
Name: " Pass " ,
ID: " Pass " ,
Inputtype: " Password " ,
// Width: 200
}
],
Buttons: [{text: " OK " }, {Text: " Cancel " , Handler: Function () {Alert () ;}}]
});

For inputtype, the parameters are as follows:

// Various types of input (we all know that only a few typical types are listed)
Radio
Check
Text (default)
File
Password, etc.

For more information about the formpanel configuration parameters, see Panel parameters. The following two parameters are listed:

1 . Labelalign: the location where fieldlabel is arranged. The default value is " Left " And the other two enumerated values are " Center " , " Right "
2 . Labelwidth: the percentage of fieldlabel
3 . Method: " Get " Or " Post "
4 . Url: " Submitted address "

5. Submit: Submit Function//We will analyze it in detail later.

Because there is too much content, let's look at an example first.
1. formpanel fieldset Application

// Rewrite the items attributes of the previous code.
Items :[
{
Xtype: ' Fieldset ' ,
Title: ' Personal Information ' ,
Collapsible: True ,
Autoheight: True ,
Width: 330 ,
Defaults: {width: 150 },
Defaulttype: ' Textfield ' ,
Items :[{
Fieldlabel: ' Hobbies ' ,
Name: ' Holobby ' ,
Value: ' Www.cnblogs.com '
},{
Xtype: " Combo " ,
Name: ' Sex ' ,
Store :[ " Male " , " Female " , " Confidentiality " ], // The data source is an array
Fieldlabel: " Gender " ,
Emptytext: ' Select gender. '
}]
}
]

The combox component here is a simple demonstration. We will discuss it in detail later.
2. For the xtype type, in the Form of extjs(For more information, see the API:

Form Components
---------------------------------------
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

it's not too early. formpanel has many things to understand, but we can't talk about it any more today. It's too much. Everyone is not interested in it. Continue tomorrow.
extjs is very rich, but no one has written articles in Chinese system analysis, now I want to do this, Please support me a lot, and I will be motivated.
only with passion can I write a better next article, let's look forward to more exciting next!