"ExtJS" Formpanel layout (i)

Preparation, the simplest form, a total of 5 components, are TextField.

1Ext.onready (function(){2Ext.create (' Ext.form.Panel ', {3width:500,4Title: ' Layout ',5Renderto: ' Form ',6 items: [{7Xtype: ' TextField ',8Fieldlabel: ' Edit1 ',9Name: ' Edit1 ',Ten         },{ OneXtype: ' TextField ', AFieldlabel: ' Edit2 ', -Name: ' Edit1 ', -         },{ theXtype: ' TextField ', -Fieldlabel: ' Edit3 ', -Name: ' Edit1 ', -         },{ +Xtype: ' TextField ', -Fieldlabel: ' EDIT4 ', +Name: ' Edit1 ', A         },{ atXtype: ' TextField ', -Fieldlabel: ' Edit5 ', -Name: ' Edit1 ', -         }], - buttons: [{ -Text: ' UpDate ', inHandler:function(){ -  　　　　　　　　　 //Do something ... to } + }]  -     }); the})

Effect:

1, Absolute Absolute layout:

　　Use the standard X, Y property for x/y coordinates positioning.

1Ext.create (' Ext.form.Panel ', {2Title: ' Absolute ',3Renderto: ' Absolute ',4width:500,5height:250,6Layout: ' Absolute ',7 items: [{8Xtype: ' TextField ',9Fieldlabel: ' Edit1 ',Tenwidth:100, OneName: ' Edit1 ', AX:10, -Y:10 -    },{ theXtype: ' TextField ', -Fieldlabel: ' Edit2 ', -width:160, -Name: ' Edit1 ', +X:20, -Y:40 +    },{ AXtype: ' TextField ', atFieldlabel: ' Edit3 ', -Width:60, -Name: ' Edit1 ', -X:30, -Y:70 - },{ inXtype: ' TextField ', -Fieldlabel: ' EDIT4 ', towidth:190, +Name: ' Edit1 ', -X:40, they:100 * },{ $Xtype: ' TextField ',Panax NotoginsengFieldlabel: ' Edit5 ', -width:220, theName: ' Edit1 ', +X:50, Ay:130 the }], + buttons: [{ -Text: ' UpDate ', $Handler:function() { $        　　　　 //Do something ... - } - }] the});

Effect:

PS: When debugging encountered a situation, if only set wide width and not set high height, there will be "Layout run Failed" error. However, if you set only the height without setting the width, the form will fill the entire page without errors.

2, accordion accordion-style layout:

Note: only the sub-classes of the various panel and Ext.panel.Panel of ext can be used in containers of this layout.

such as header, Table, tool, etc., subclasses are:

Ext.container.ButtonGroup Ext.form.Panel Ext.menu.Menu Ext.panel.Table Ext.tab.Panel Ext.tip.Tip Ext.window.Window

1Ext.create (' Ext.form.Panel ', {2width:500,3height:250,4Title: ' Accordion ',5Renderto: ' Accordion ',6Layout: ' Accordion ',7 items: [{8Title: ' Panel1 ',9HTML: ' Panel content! 'Ten     },{ OneItle: ' Panel2 ', AHTML: ' Panel content! ' -     },{ -Title: ' Panel3 ', theHTML: ' Panel content! ' -     }], - buttons: [{ -Text: ' Open Panel3 ', +Handler:function() { -EXT.GETCMP (' Panel3 '). Expand (True); + } A     }]    at});

Effect:

3. Anchor type layout:

Determines the size of a child control by a fixed percentage or a fixed offset, depending on the parent control's height.

1Ext.create (' Ext.form.Panel ',{2width:500,3height:400,4Title: ' Anchor ',5Renderto: ' Anchor ',6Layout: ' Anchor ',7Buttonalign: ' Center ',8 items: [{9Xtype: ' Panel ',TenTitle: ' 75% Width and 20% Height ', OneAnchor: ' 75% 20% ' A         },{ -Xtype: ' Panel ', -Title: ' Offset-300 Width and-200 Height ', theAnchor: '-300-200 ' -         },{ -Xtype: ' Panel ', -Title: ' Offset-200 Width and 40% Height ', +Anchor: '-250 40% ' -         }], + buttons: [{ AText: ' UpDate ', atHandler:function() { -             //Do something. -         } -     }]   -});

Effect:

4, Auto

1Ext.create (' Ext.form.Panel ',{2width:500,3height:400,4Title: ' Auto ',5Renderto: ' Auto ',6Layout: ' Auto ',7Buttonalign: ' Center ',8Margin: ' 50 150 50 50 ',9Bordertrue,Ten items: [{ OneType: ' Panel ', ATitle: ' AutoLayout1 ', -Margin: ' 10 10 10 10 ', -Bordertrue,             the     },{ -Xtype: ' Panel ', -Title: ' AutoLayout2 ', -Bordertrue, +Margin: ' 10 10 10 10 ' -     }], + buttons: [{ AText: ' UpDate ', atHandler:function() { -             //Do something. -     } -     }]   -});

Effect:

Some common configurations and issues:

1. Border Border setting

The default is false and the border is not visible. True borders are visible.

2. Margin Component page Edge

Margin can be a numeric value that applies to all sides, or it can be a CSS style specification for each style, for example: ' 10 5 3 10 '.

3. buttonalign button Position

Specifies the position of the button in the panel. The configurable values are ' right ', ' left ' and ' center ' (default to ' right ' for all buttons/fbar, and ' left ' for toolbar).

4, Handler:function () {}

The trigger of the button click event.

5, about the label Fieldlabel and title

　　Title is the label text to be realistic.

　　Fieldlabel is the domain label. It is appended with the Labelseparator, and its location and size are confirmed by LabelAlign, Labelwidth, and Labelpad configurations.

Labelseparator: The character that is inserted after the Fieldlabel. The default is ":"

LabelAlign: Controls the position and alignment of the Fieldlabel. Valid values are:

"Left" (default)-the label is on the left side of the field and its text is aligned to the right. Its width is determined by the Labelwidth configuration.

"Top"-the label is at the top of the field.

"Right"-the label is on the right side of the field and its text is justified. Its width is determined by the Labelwidth configuration.

Labelwidth:fieldlabel the width in pixels. Applies only to LabelAlign set "left" or "right". The default is "100".

The total of the pixel space between the Labelpad:fieldlabel and the input fields. The default is "5".

"ExtJS" Formpanel layout (i)