Learn ExtJS form layout_extjs

1. Form layout is defined by the class Ext.layout.FormLayout, named form. It is a layout specially used to manage input fields in forms. This layout is mainly used to create form fields or form elements in programs.
hideLabels: tru means hiding labels, the default is false.
labelAlign: label alignment method left, right, center, the default is left.

Copy code The code is as follows:

Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"Personnel Information",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"Name",name:"name"},
{fieldLabel:"Please enter the address",name:"address"},
{fieldLabel:"Please enter the phone number",name:"tel" }
]
}
);

2. In practical applications, the default layout of the Ext.form.FormPanel class uses the Form layout, so we use FormPanel directly That’s it. The above example can be rewritten into the following form:

Copy the code The code is as follows:

Ext.onReady(function(){
var _panel = new Ext.FormPanel({
title:"Personnel Information",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items: [
{fieldLabel:"Name",name:"name"},
{fieldLabel:"Please enter the address",name:"address"},
{fieldLabel:"Please enter the phone number",name :"tel"}
]
}
);