1、border佈局
border佈局是當前項目實現中經常使用到的一種佈局形式。這種佈局將整個頁面劃分爲五個部分，分別是上（north）、下（south）、左（west）、右（east）、中（center）。通過region這個屬性指定特定組件顯示在頁面中的特定位置，並可以指定待顯示組件的寬度或高度。當然，寬度和高度的設置對於center中的組件是無效的，因爲center中的組件默認佈局爲fit。
對於border佈局來說，上、下、左、右這四個部分的顯示內容不是必須存在的，但是一個border佈局中center部分必不可少。
例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | /** * 1、border佈局： * border佈局是當前項目實現中經常使用到的一種佈局形式。 * 這種佈局將整個頁面劃分爲五個部分，分別是上（north）、下（south）、左（west）、右（east）、中（center）。 * 通過region這個屬性指定特定組件顯示在頁面中的特定位置，並可以指定待顯示組件的寬度或高度。 * 寬度和高度的設置對於center中的組件是無效的，因爲center中的組件默認佈局爲fit。 * * Viewport: * 1.Viewport渲染自身到網頁的documet body區域， 並自動將自己調整到適合瀏覽器窗口的大小， * 在窗口大小發生改變時自動適應大小。 一個頁面中只能創建一個Viewport。 * 2.任何的Container容器都可以作爲一個Viewport 的子組件， * 開發者使用一個Viewport作爲父容器配置佈局layout，並管理他們的大小和位置。 * 3.Viewports一般使用border layout佈局, 如果開發者需要的佈局很簡單,可以指定一個簡單佈局。 * */ Ext.onReady(function(){ var panel=new Ext.Viewport({ layout:"border", //邊界佈局 items:[{ title:"north panel", html:"<div style='height:150px'>上面</div>", collapsible : true, region:"north"//指定子面板所在區域在north（上） },{ title:"south panel", html:"<div style='height:150px'>下面</div>", collapsible : true, region:"south"//指定子面板所在區域在south（下） },{ title:"west panel", html:"<div style='width:150px'>左面</div>", collapsible : true, region:"west"//指定子面板所在區域在west（左） },{ title:"center panel", html:"中間", region:"center"//指定子面板所在區域在center（中） },{ title:"east panel", html:"<div style='width:150px'>右面</div>", collapsible : true, region:"east"//指定子面板所在區域在east（右） }] }); }); |
頁面效果：
2、fit佈局
fit佈局是一種較爲常見的佈局方式，使用fit佈局方式進行佈局時，子面板會100%充滿父面板。如果父面板中同時加載了多個子面板，則只會顯示第一個加載的子面板。
例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /** * 2、fit佈局 * fit佈局是一種較爲常見的佈局方式，使用fit佈局方式進行佈局時，子面板會100%充滿父面板。 * 如果父面板中同時加載了多個子面板，則只會顯示第一個加載的子面板。 */ Ext.onReady(function(){ Ext.create('Ext.panel.Panel', { title: 'Fit Layout', width: 300, height: 150, layout:'fit', items: { title: 'Inner Panel', html: 'This is the inner panel content', bodyPadding: 20, border: false }, renderTo: Ext.getBody() }); }); |
頁面效果：
3、vbox佈局
vbox佈局把呈現在這種佈局面板中的子元素按照縱向排成一列，可以根據需要設置縱向排列的樣式。
示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /** * vbox佈局 * vbox佈局把呈現在這種佈局面板中的子元素按照縱向排成一列，可以根據需要設置縱向排列的樣式。 */ Ext.onReady(function(){ Ext.create("Ext.Panel",{ title:"容器面板", width:400, height:500, layout:{ type:"vbox", pack:"center", //控制子組件如何被打包在一起，start：左邊（默認）；center：居中；end：右邊 align:"center" //對齊方式 center、left、right：居中、左對齊、右對齊；stretch：延伸；stretchmax：以最大的元素爲標準延伸 }, items:[{ xtype:"button", text:"小按鈕", flex:1, width:150 },{ xtype:"tbspacer", //插入的空填充 flex:3 //表示當前子元素尺寸所佔的均分的份數 },{ xtype:"button", text:"中按鈕", width:250 },{ xtype:"button", text:"大按鈕", flex:1, width:350 }], renderTo:Ext.getBody() }); }); |
頁面效果：
4、hbox佈局
hbox佈局與vbox佈局類似，把呈現在這種佈局面板中的子元素按照橫向排成一行，可以根據需要設置縱向排列的樣式。
示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | /** *hbox佈局 *hbox佈局與vbox佈局類似，把呈現在這種佈局面板中的子元素按照橫向排成一行，可以根據需要設置縱向排列的樣式。 */ Ext.onReady(function(){ Ext.create("Ext.Panel",{ title:"容器面板", height:500, width:800, renderTo:Ext.getBody(), layout:{ type:"hbox", /* * algin:控制子組件在容器中的對齊方式 * top : 默認值 各子組件在容器頂部水平對齊. * middle : 各子組件在容器中間水平對齊. * stretch : 各子組件的高度拉伸至與容器的高度相等. * stretchmax : 各子組件的高度拉伸至與最高的子組件的高度相等. */ align:"top", /* * pack:控制子組件如何被打包在一起 * start - 子組件被包在一起放在容器的左邊 (默認) * center - 子組件被包在一起放在容器里居中 * end - 子組件被包在一起放在容器的右邊 */ pack:"center" }, items:[{ type:"panel", title:"panel1", width:150, height:200 },{ type:"panel", title:"panel2", width:150, height:300 },{ type:"panel", title:"panel3", width:150, height:400 },{ type:"panel", title:"panel4", width:150, height:500, html:"<h3>Panel4 Content</h3>" }] }); }); |
頁面效果：
5、table佈局
table表格佈局允許開發人員像繪製表格一樣去繪製展示的頁面，可以根據需要自由地設置頁面的列和行，從而使頁面展示的子元素有序的組織在一起，常用的屬性有rowspan和colspan。
示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | /** * table佈局 * table表格佈局允許開發人員像繪製表格一樣去繪製展示的頁面，可以根據需要自由地設置頁面的列和行， * 從而使頁面展示的子元素有序的組織在一起，常用的屬性有rowspan(跨行)和colspan(跨列)。 */ Ext.onReady(function(){ Ext.create("Ext.Panel",{ title:"table佈局", width:500, height:400, layout:{ type:"table", columns:4 }, frame:true, //渲染面板 defaults : {//設置默認屬性 bodyStyle:'background-color:#FFFFFF;',//設置面板體的背景色 frame : true }, items:[{ title:"子面板一", width:300, height:100, colspan:3 //設置跨列 },{ title:"子面板二", height:200, width:100, rowspan:2 //設置跨行 },{ width:100, height:100, title:"子面板三" },{ width:100, height:100, title:"子面板四" },{ width:100, height:100, title:"子面板五" }], renderTo:Ext.getBody() }); }); |
頁面效果：
6、accordion 佈局
Accordion佈局稱爲摺疊佈局，又被稱爲手風琴式的佈局，點擊每一個子元素的頭部名稱或右邊的按鈕，則會展開該面板，並收縮其它已經展開的面板。打開頁面時，默認會打開第一個面板。
示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /** * Accordion佈局 * Accordion佈局稱爲摺疊佈局，又被稱爲手風琴式的佈局，點擊每一個子元素的頭部名稱或右邊的按鈕， * 則會展開該面板，並收縮其它已經展開的面板。打開頁面時，默認會打開第一個面板。 */ Ext.onReady(function(){ Ext.create("Ext.Panel",{ width:400, height:500, title:"Accordion佈局示例", frame:true, layout:{ type:"accordion", fill:true //子面板充滿父面板空間 }, items:[{ title:"子面板一" },{ title:"子面板二" },{ title:"子面板三" }], renderTo:Ext.getBody() }); }); |
頁面效果：
7、card佈局
card卡片佈局允許在一個頁面中實現多個子頁面內容的展示，tabPanel面板默認的佈局方式即爲卡片佈局。
示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /** * card佈局 * card卡片佈局允許在一個頁面中實現多個子頁面內容的展示 */ Ext.onReady(function(){ var panel=new Ext.Panel({ title:"card佈局示例", width:600, height:500, layout:"card", activeItem:0, //默認顯示第一個子面板 frame:true, items:[{ title:"子面板一", html:"<h3>子面板一 Content</h3>" },{ title:"子面板二", html:"<h3>子面板二 Content</h3>" }], buttons:[{ text:"顯示子面板一", handler:function(){ panel.layout.setActiveItem(0); } },{ text:"顯示子面板二", handler:function(){ panel.layout.setActiveItem(1); } }], renderTo:Ext.getBody() }); }); |
頁面效果：
