對於一個容器組件，比如Ext .FormPanel，其內部空間無非是按照橫向或縱向劃分；如果需要更復雜的佈局方式，就對第一次劃分得到的子區域進行再劃分。
form的含義是把容器按照橫向劃分，劃分得到的行數與容器內的子元素（直接子元素，而不包含子元素內部的元素）個數相同，每個元素佔一行；
column的含義是把容器按照縱向劃分，劃分得到的列數同上。
下面看看如何使用form和column
比如讓我們實現一個登錄的界面：
var login = new Ext . FormPanel ({
labelAlign : ' top ' ,
frame : true ,
title : ' Login ' ,
id : ' login ' ,
bodyStyle : ' padding:5px 5px 0 ' ,
width : 400 ,
items : [{
layout : ' column ' , //把整個空間劃分成兩列
items : [{
html : ' <img src="loginLogo.png" /> ' //左邊列放一個logo
} , {
columnWidth : .5 ,
layout : ' form ' , //右邊列再分成上下兩行
items : [{
xtype : ' textfield ' ,
fieldLabel : ' Username ' , //第一行是用戶名輸入框
name : ' name ' ,
id : ' name ' ,
anchor : ' 100% '
} , {
xtype : ' textfield ' ,
fieldLabel : ' Password ' , //第二行是密碼輸入框
name : ' pass ' ,
id : ' pass ' ,
anchor : ' 100% ' ,
inputType : ' password '
}]
}]
}] ,
buttons : [{
text : ' OK ' , //用戶名密碼確認按鈕
handler : function (){
var name = Ext . get ( ' name ' ) . dom . value ;
var pass = Ext . get ( ' pass ' ) . dom . value ;
if ( name == ' good ' && pass == ' good ' ){
//login correct, do something
} else {
Ext . MessageBox . alert ( ' Warning! ' , ' Incorrect Login ' ) ;
}
} , {
text : ' Reset ' , //用戶名密碼重置按鈕
handler : function (){
Ext . get ( ' name ' ) . dom . value = '' ;
Ext . get ( ' pass ' ) . dom . value = '' ;
}
} ]
} );
login . render ( document . body ) ;
login . getEl () . center () ;
這段代碼 中，第8行至第30行與本文的主題“佈局”相關。這幾行代碼把一個FormPanel分成兩列，左邊放一個圖片logo；右列再被細分爲上下兩行，上面一行爲用戶名輸入框，下面一行爲密碼輸入框。這樣一個簡單的例子已經展示了佈局的嵌套，以此遞歸地嵌套下去，就可以創建出非常複雜的佈局方式。但是切記，網頁是越簡單越好。
從第31行開始，是爲了這段login代碼的完整性，加入了用於事件響應的按鈕(buttons)。
最後兩行代碼的含義是把該登錄界面顯示出來，並居中。