Extjs 頁面佈局

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章