[ ExtJS ] 頁面佈局 Layout 介紹

以下會分別簡單介紹一下這十種由 ExtJS 所提供的佈局方式：
Absolute
Accordion
Anchor
Border
Card
Column
Fit
Form
HBox / VBox
Table

官網Layout範例：http://docs.sencha.com/ext-js/4-1/#!/example/layout-browser/layout-browser.html


★ Layout : 'absolute'

API：Ext.layout.container.Absolute

元件佈局不隨視窗大小變動，十分固定
其子元件必須明確指派 x / y 的位置
若有元件overlay情形，後加的元素會往上疊



★ Layout : 'accordion'

API：Ext.layout.container.Accordion

可將元件 / 容器使用手風琴般的方式摺疊
預設將失去焦點的元件摺疊，並依元件加入順序疊放，只留下標題列
其他需要調整的細部則用 layoutConfig 設定



★ Layout : 'anchor'

API：Ext.layout.container.Anchor

可讓元件大小隨容器改變
兩種表示法：百分比 / 絕對尺寸
只寫一數值則代表寬，高度則由元件自行計算
數值 0 與 100% 同義
絕對尺寸為負值，表偏移量，其寬高指的是該容器內的context寬高



★ Layout : 'border'

API：Ext.layout.container.Border

子元件必須明確指定region

其中，north／south只能設height，west／east只能設width，center不能設寬高，為扣除所有region後的大小
除了center為必要外，其他region為選擇性而非必要



★ Layout : 'card'

API：Ext.layout.container.Card

將元件採用card方式擺放，一次只有顯示一張
若要提升效能，而在載入時只繪製被啟動的子元件，則需加入：layoutConfig:{ deferredRender:true}

可使用getLayout().setActiveItem()來切換子元件



★ Layout : 'column'

API：Ext.layout.container.Column

用於將欄位水平排放
寬度設定：百分比 ／ 固定數值，可混用，會優先計算固定數值，剩的再以其百分比分配
columnWidth 的百分比表示法為小數，總合應為1
若指派元件設後會過寬，該元件會被擠到下一行



★ Layout : 'fit'

API：Ext.layout.container.Fit

讓容器與子元件無縫銜接
即便有多個子元件，也只會顯示一個子元件



★ Layout : 'form'

API：Ext.layout.container.Form

產生類似表單的外觀，用於管理表單布局
直接使用的話，一行內只能有一個item



★ Layout : 'hbox' / Layout : 'vbox'

API：Ext.layout.container.HBox ／ Ext.layout.container.VBox

HBox將元件水平擺放，其 align 提供 top , middle , stretch , strechmax 的水平對齊方式
VBox將元件垂直推疊，其 align 提供 left , center , stretch , strechmax 的水平對齊方式
HBox無bottom對齊方式，而VBox無right對齊方式，是因為受限於各瀏覽器實作方式不一所致



★ Layout : 'table'

API：Ext.layout.container.Table

必須設定layoutConfig中的columns
再透過 colspan / rowspan 設定所佔的欄數 / 列數使用時，colspan需設定寬度，rowspan則需設定高度