ExtJS about Formpanel Layouts

ExtJS about Formpanel Layouts

Formpanel has two layouts:form and column, form is portrait layout, column is landscape layout. The default is the latter. Use the Layout property to define the type of layouts. For a complex layout form, the most important thing is the correct segmentation, the segmentation results directly determine whether the layout can be implemented smoothly.
If you no longer use the default layout, then we must specify a layout for each element, and you must also follow these points:
After "1" is implemented into any form component, the final form layout is always
The "2" DefaultType property does not necessarily work, and you must explicitly specify the Xtype or new object for each form component
"3" In the column layout, you can specify a percentage of the width of the column, such as 50% width, by columnwidth. 5.

analyze a reasonable structure, like so :

We found that the layout is actually made up of rows and columns of components, divided from left to right and from top to bottom in two directions, left to right
Called column, from the top down to the form.

The entire large form layout, placed five small layouts from top to bottom, where I marked with row N, we
Take line 1 as an example for analysis. Line 1 has three form components from left to right, so it's a column layout, row 1 we use a knot
The definition of such a structure:
{
Layout: "Column",
items:[{},{},{}]//items represents a collection of form components within a specified layout, where there are three
}

There are actually three form layouts in line 1, because there is only one form component in each layout, so it doesn't look
So obviously, we can put more than one form component into the layout. Each layout uses the following structure definition:
{
Layout: "Form",
items:[{}]//Only one form component
}

The two structures above will eventually be assembled together:
{
Layout: "Column",
items:[{
Layout: "Form",
items:[{}]
},{
Layout: "Form",
Items: [{}]
},{
Layout: "Form",
Items: [{}]
}]
}

Implementing the complete code above is:

Ext.onready (function () {
var form = new Ext.form.FormPanel ({
Title: "Flexible layout of forms",
WIDTH:650,
Autoheight:true,
Frame:true,
Renderto: "A",
Layout: "Form",//entire large form layout
LABELWIDTH:65,
LabelAlign: "Right",

Items: [{//Line 1
Layout: "column",//left to right
Items: [{
ColumnWidth:. 3,//The column has a percentage of the entire row
Layout: "Form",//from the top down
Items: [{
Xtype: "TextField",
Fieldlabel: "Last Name",
width:120
}]
}, {
ColumnWidth:. 3,
Layout: "Form",
Items: [{
Xtype: "TextField",
Fieldlabel: "Name",
width:120
}]
}, {
ColumnWidth:. 3,
Layout: "Form",
Items: [{
Xtype: "TextField",
Fieldlabel: "English name",
width:120
}]
}]
}, {//Line 2
Layout: "Column",
Items: [{
ColumnWidth:. 5,
Layout: "Form",
Items: [{
Xtype: "TextField",
Fieldlabel: "Motto 1",
width:220
}]
}, {
ColumnWidth:. 5,
Layout: "Form",
Items: [{
Xtype: "TextField",
Fieldlabel: "Motto 2",
width:220
}]
}]
}, {//Line 3
Layout: "Form",
Items: [{
Xtype: "TextField",
Fieldlabel: "Reward",
width:500
}, {
Xtype: "TextField",
Fieldlabel: "Punishment",
width:500
}]
}, {//Line 4
Layout: "Column",
Items: [{
Layout: "Form",
columnwidth:0.2,
Items: [{
Xtype: "TextField",
Fieldlabel: "Movie Favorites",
Width:50
}]
}, {
Layout: "Form",
columnwidth:0.2,
Items: [{
Xtype: "TextField",
Fieldlabel: "Music Favorites",
Width:50
}]
}, {
Layout: "Form",
columnwidth:0.2,
Items: [{
Xtype: "TextField",
Fieldlabel: "Star favorite",
Width:50
}]
}, {
Layout: "Form",
columnwidth:0.2,
Items: [{
Xtype: "TextField",
Fieldlabel: "Sports Favorites",
Width:50
}]
}]
}, {//Line 5
Layout: "Form",
Items: [{
Xtype: "HTMLEditor",
Fieldlabel: "award-winning articles",
Enablelists:false,
Enablesourceedit:false,
height:150
}]
}],
Buttonalign: "Center",
Buttons: [{
Text: "Submit"
}, {
Text: "Reset"
}]
});
});

ExtJS about Formpanel Layouts