EXT3.0各種布局說明

ExtJs3 中的布局方法是採用 Ext.Container 類中的 Layout 屬性去實現的，給 Layout 屬性指定一個布局委託類去渲染容器內的子項目的展示。

Ext.layout 包內提供了 14 種不同的布局類，專用布局類 2 種，通用的布局類 12 種：

layout 值
 布局類
 說明
 
auto
 Ext.layout.ContainerLayout
 所有布局類的基類， layout 的預設值
 
absolute
 Ext.layout.AbsoluteLayout
 絕對位置布局
 
accordion
 Ext.layout.AccordionLayout
 手風琴布局
 
anchor
 Ext.layout.Anchorlayout
 定位式布局
 
border
 Ext.layout.BorderLayout
 邊界式布局
 
card
 Ext.layout.CardLayout
 卡片式布局，標籤和嚮導兩種
 
column
 Ext.layout.ColumnLayout
 列布局
 
fit
 Ext.layout.FitLayout
 填充式布局
 
form
 Ext.layout.FormLayout
 表單布局
 
table
 Ext.layout.TableLayout
 表格版面配置
 
hbox
 Ext.layout.HboxLayout
 縱向切分布局
 
vbox
 Ext.layout.VBoxLayout
 橫向切分布局
 
toolbar
 Ext.layout.ToolbarLayout
 工具列布局，僅用於工具列組件 (Ext.Toolbar)
 
menu
 Ext.layout.MenuLayout
 菜單布局，僅用於菜單組件 (Ext.menu.Menu)
 

Absolute絕對位置布局，通過定位子項目在容器內部的座標決定子項目的位置

Accordion手風琴布局，收縮式的類似菜單樣式，包含多個面板，只顯示其中一個

Anchor定位式布局，相對於容器四周的尺寸大小，對其包含在內的元素進行定位

Border邊界式布局，一種多面板，面嚮應用程式UI的布局風格，可支援多個套嵌面板，各地區間自動分隔和擴充/收縮功能。

Card標籤式布局，包含的多個面板，裡面的每個面板都會填充整個容器，而在同一時候只有一個面板是被顯示的。比較常見的應用場合是Wizards（嚮導式對話方塊）、Tab標籤頁這些的實現等等。

Column列式布局，構建多個垂直式結構而準備的布局，當中包含已指定寬度的多個列，列的寬度可以是固定值，也可以是可伸縮的百分比寬度，但裡面的內容就是自適應高度了。

Fit填充式布局，單個項布局的基類，這種布局會在容器上自動鋪開以填充整個容器。

Form表單式布局，用來建立一個表單的布局，負責渲染和其組件內的子元件。

Table表格式布局，這種布局可以讓你把內容輕易地渲染到一個HTML表格。可指定列的總數，而屬性：跨行（rowspan）與跨列（colspan）就用於建立表格複雜的布局。

HBox縱向切分布局

VBox橫向切分布局

文章出處：飛諾網(www.firnow.com):http://dev.firnow.com/course/4_webprogram/jsp/jsp_js/20100721/477625.html