Ext主要包括11種標准布局方式：Auto(自動布局)、CheckboxGroup(復選框組布局)、Fit(自適應布局)、Column(列布局)、Accordion(折疊布局)、Table(表格布局)、Card(卡片式布局)、Border(邊框布局)、Anchor(錨點布局)、Box(盒布局)、Absolute(絕對位置布局)。
一.Auto(自動布局)：默認布局方式，使用原始的HTML文檔流來布局子元素，並把布局調用傳遞到子容器。
二.Fit(自適應布局)：將使唯一的子元素充滿容器，如果在當前容器中存在多個子面板則只有第一個會被顯示，代碼如下：
Ext.create('Ext.Panel',{
title : 'fit布局示例',
frame : true,
height : 200,
width : 300,
renderTo : Ext.getBody(),
defaults : { bodyStyle :'backgroundColor:#ffc' },
layout : 'fit',
items : [{
title : '嵌套面板一',
html : '面板一',
width : 100
},
{
title : '嵌套面板二',
html : '面板二',
width : 100
}]
});
fit圖例：
三.Accordion(折疊布局)：手風琴式布局，代碼如下：
Ext.create('Ext.Panel', {
title : 'Accordion折疊布局',
width : 300,
height : 300,
defaults : {
bodyStyle : 'padding:15px'
},
layout : {
type : 'accordion',
animate : true,
activeOnTop : true
//multi : true 可以同時打開多個面板
},
items : [{
title : 'Panel 1',
html : 'Panel content!'
}, {
title : 'Panel 2',
html : 'Panel content!'
}, {
title : 'Panel 3',
html : 'Panel content!'
}],
renderTo : Ext.getBody()
});
Accordion圖例：
四.Card(卡片式布局)：該布局會包含多個子面板，任何時候都只有一個面板處於顯示狀態，這種布局類經常用來制作向導和標簽頁。該布局的重點方法是setActiveItem，因為一次只能顯示一個子面板，所以切換子面板的唯一途徑，就是調用setActiveItem方法。接收一個子面板id或者索引作為參數。Card布局並沒有提供一個子面板的導航機制，導航邏輯需要開發人員自己實現。代碼如下：
var cardPanel = Ext.create('Ext.Panel',{ title : 'card布局示例', frame :true, height : 200, width : 300, renderTo : Ext.getBody(), defaults : { bodyStyle : 'backgroundColor:#ffc' }, layout : 'card', items : [{ title : '嵌套面板一', html : '面板一', width : 100 },{ title : '嵌套面板二', html :'面板二', width : 100 }], buttons : [{ text : '上一個', handler : function(){ var card = cardPanel.layout; if(card.getPrev()) card.setActiveItem(card.getPrev()); } },{ text : '下一個', handler : function(){ var card = cardPanel.layout; if(card.getNext()) card.setActiveItem(card.getNext()); } }] });
card圖例：
五.Anchor(錨點布局)：根據容器大小為其所包含的子面板進行定位的布局，如果容器大小發生變化，所有子面板的位置都會根據規則重新計算，並重新渲染。注意配置項的使用。
*anchorSize(父類提供)：用來設置虛擬容器的大小，默認情況下anchor布局是根據容器自身的大小來進行計算定位的，如果提供了anchorSize屬性則anchor布局就會根據該尺寸生成一個虛擬容器，然后根據這個虛擬容器的大小來進行計算定位。
*anchor(子容器提供)：可以給百分比，也可以是偏移值，還可以是參考邊('right','r','bottom','b').
Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "AnchorLayout Panel",
layout: 'anchor',
renderTo: Ext.getBody(),
items: [
{
xtype: 'panel',
title: '75% Width and 20% Height',
anchor: '75% 20%'
},
{
xtype: 'panel',
title: 'Offset -300 Width & -200 Height',
anchor: '-300 -200'
},
{
xtype: 'panel',
title: 'Mixed Offset and Percent',
anchor: '-250 20%'
}
]
});
anchor圖例：
六.Absolute(絕對位置布局): 根據x、y坐標進行定位。
七.CheckboxGroup(復選框組布局): 實現了按列布局表單組件Ext.form.CheckboxGroup 和 Ext.form.RadioGroup功能，代碼如下：
Ext.create('Ext.Panel',
{ title : 'checkboxgroup布局示例',
frame : true,
height : 200,
width : 300,
renderTo : Ext.getBody(),
defaults : {
bodyStyle : 'backgroundColor:#ffc',
labelWidth : 50,
labelAlign :'left'
},
items : [
{
xtype : 'radiogroup',
fieldLabel : '性別',
columns :2,
width : 250,
items : [
{boxLabel : '男', name : 'sex', inputValue :'male' },
{boxLabel : '女', name : 'sex', inputValue : 'female'}
]
},{
xtype : 'checkboxgroup',
fieldLabel : '興趣',
columns : 3,
width : 250,
items : [
{ boxLabel: '游泳', name: 'rb', inputValue: '1' },
{ boxLabel: '閱讀', name: 'rb', inputValue: '2', checked: true },
{ boxLabel: '游戲', name: 'rb', inputValue: '3' },
{ boxLabel: '電影', name: 'rb', inputValue: '4' },
{ boxLabel: '散步', name: 'rb',inputValue: '5' },
{ boxLabel: '登山', name: 'rb', inputValue: '6' } ]
}]
});
CheckboxGroup圖例：
八.Column(列布局): 這是一種多列風格的布局樣式，每一列的寬度都可以根據百分比或者固定值來進行設置，高度允許根據內容進行變化，它支持一個特殊的屬性columnWidth，每一個加入到容器中的子面板都可以通過columnWidth配置項指定百分比或使用width配置，來確定列寬。width配置項是以像素為單位的固定寬度，必須是大於或等於1的數字。columnWidth配置項是以百分比為單位的相對寬度，必須是大於0小於1的小數，例如 ".25".固定值優先於百分比進行計算，也就是說，百分比計算的基礎寬度是父容器的寬度減去固定列寬之后剩余的寬度值。代碼如下：
Ext.create('Ext.Panel',{
title : 'column布局示例',
frame : true,
height :150,
width : 300,
renderTo : Ext.getBody(),
defaults : { bodyStyle :'backgroundColor:#ffc', height : 100 },
layout : 'column',
items : [
{ title : '嵌套面板一', html : '面板一', width : 100 },
{ title : '嵌套面板二', html :'面板二', columnWidth : .3 },
{ title : '嵌套面板三', html : '面板三',columnWidth : .7 }
]
});
column圖例：
九.Table(表格布局):這種布局允許你非常容易地渲染內容到HTML表格中，可以指定列數、跨行、跨列、可以創建出復雜的表格布局。代碼如下：
Ext.create('Ext.panel.Panel', {
title : 'Table Layout',
width : 300,
height : 150,
layout : {
type : 'table',
columns : 3
},
defaults : {
bodyStyle : 'padding:20px'
},
items : [{
html : 'Cell A content',
rowspan : 2
}, {
html : 'Cell B content',
colspan : 2
}, {
html : 'Cell C content'
}, {
html : 'Cell D content'
}],
renderTo : Ext.getBody()
});
table圖例：
10.Border(邊框布局)：將容器分為5個部分：east,west,north,south,center。通過region進行指定。
Ext.create('Ext.Panel', {
width : 500,
height : 300,
title : 'Border布局示例',
layout : 'border',
items : [
{
title : 'center',
html : '中部',
region : 'center'
},{
title : 'north',
html : '北部',
region : 'north'
}, {
title : 'south',
html : '南部',
region : 'south'
}, {
title : 'east',
html : '東部',
region : 'east',
width : 100
},{
title : 'west',
html : '西部',
region : 'west',
width : 50
}],
renderTo : Ext.getBody()
});
border圖例：
11.Box(盒布局):又分為HboxLayout(水平盒布局) 和 VboxLayout(垂直盒布局)，通過子元素的flex配置項來划分父容器的空間。代碼如下：
Ext.create('Ext.Panel', {
width: 400,
height: 200,
title: "box盒布局",
layout: {
type: 'hbox',
align: 'stretch' //子面板高度充滿父容器
},
renderTo: document.body,
items: [{
xtype: 'panel',
title: '占2/4',
flex: 2
},{
xtype: 'panel',
title: '占1/4',
flex: 1
},{
xtype: 'panel',
title: '占1/4',
flex: 1
}]
});
box圖例：
