學習ExtJS form布局_extjs

一、 Form布局由類Ext.layout.FormLayout定義，名稱為form，是一種專門用於管理表單中輸入欄位的布局，這種布局主要用於在程式中建立表單欄位或表單元素等使用。
hideLabels：tru表示隱藏標籤，預設為false。
labelAlign：標籤隊齊方式left、right、center,預設為left。

複製代碼 代碼如下:

Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人員資訊",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"姓名",name:"name"},
{fieldLabel:"請輸入地址",name:"address"},
{fieldLabel:"請輸入電話",name:"tel"}
]
}
);

二、在實際應用中，Ext.form.FormPanel這個類預設布局使用的是Form布局，因此我們直接使用FormPanel即可。上面的例子可改寫成如下的形式：

複製代碼 代碼如下:

Ext.onReady(function(){
var _panel = new Ext.FormPanel({
title:"人員資訊",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"姓名",name:"name"},
{fieldLabel:"請輸入地址",name:"address"},
{fieldLabel:"請輸入電話",name:"tel"}
]
}
);