ExtJs頁面佈局詳解

EXT標準佈局類

皮膚相當於一張乾淨的白紙，如果直接在上面新增內容，將很難控制皮膚中內容的顯示位置，皮膚元素越多就越顯得凌亂，所以需要在皮膚上劃分不同的區域，將皮膚內容展示到希望的位置上。ExtJS通過提供多種佈局類來為皮膚提供支援，主要包括如下10種：
ContainerLayout（容器佈局）
FitLayout（自適應佈局）
AccordionLayout（摺疊佈局）
CardLayout（卡片式佈局）
AnchorLayout（錨點佈局）
AbsoluteLayout（絕對位置佈局）
FormLayout（表單佈局）
ColumnLayout（列布局）
TableLayout（表格佈局）
BorderLayout（邊框佈局）
接下來分別介紹這10種佈局類的特點及使用方式。

1 ContainerLayout容器佈局

Ext.layout.ContainerLayout 提供了所有佈局類的基本功能，它沒有視覺化的外觀，只是提供容器作為佈局的基本邏輯，這個類通常被擴充套件而不通過 new 關鍵字直接建立。如果皮膚（panel）沒有指定任何佈局類，則它將會作為預設佈局來建立，表5-4是主要配置項。

表5-4 Ext.layout.ContainerLayout主要配置專案表

2 FitLayout自適應佈局

Ext.layout.FitLayout 是佈局的基礎類，對應皮膚佈局配置項（layout）的名稱為 fit，使用 fit 佈局將使皮膚子元素自動充滿容器，如果在當前容器中存在多個子皮膚則只有第一個會被顯示。
注意：在本節的示例之前會簡單的介紹新概念，元件的xtype型別。xtype型別相當於元件的別名，通過使用xtype型別可以實現元件的延時建立。在後續的示例中會大量使用xtype來建立元件，這將有利於讀者形成使用xtype的習慣，而減少new關鍵字的使用。
下面是自適應佈局的一個簡單的示例。
程式碼5-7：FitLayout（自適應佈局）示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout :'fit',
title:'Ext.layout.FitLayout佈局示例',
frame:true, //渲染皮膚
height : 150,
width : 250,
applyTo :'panel',
defaults : { //設定預設屬性
bodyStyle:'background-color:#FFFFFF' //設定皮膚體的背景色
},
//皮膚items配置項預設的xtype型別為panel，該預設值可以通過defaultType配置項進行更改
items: [
{
title : '巢狀皮膚一',
html : '皮膚一'
},
{
title : '巢狀皮膚二',
html : '皮膚二'
}
]
})
});
</script>
在程式碼5-7中共為外層皮膚新增了2個子皮膚，title分別是“巢狀皮膚一”和“巢狀皮膚二”，並指定外層皮膚的佈局型別為fit，由圖 5-11可以看到“巢狀皮膚一”充滿了整個外層皮膚，而“巢狀皮膚二”並沒有顯示出來。執行效果如圖5-11所示。

圖5-11 Ext.layout.FitLayout佈局示例

Ext.layout.Accordion 擴充套件自 Ext.layout.FitLayout 佈局，對應皮膚佈局（layout）配置項的名稱為accordion。該佈局會包含多個子皮膚，任何時候都只有一個子皮膚處於開啟狀態，每個子皮膚都內建了對展開和收縮功能的支援。表5-5列出了它的主要配置專案。

表5-5 Ext.layout.Accordion主要配置專案表

下面是摺疊佈局的一個簡單的示例。

程式碼5-8：AccordionLayout（摺疊佈局）示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout : 'accordion',
layoutConfig :{
activeOnTop : true, //設定開啟的子皮膚置頂
fill : true, //子皮膚充滿父皮膚的剩餘空間
hideCollapseTool: false, //顯示“展開收縮”按鈕
titleCollapse : true, //允許通過點選子皮膚的標題來展開或收縮皮膚
animate:true //使用動畫效果
},
title:'Ext.layout.Accordion佈局示例',
frame:true, //渲染皮膚
height : 150,
width : 250,
applyTo :'panel',
defaults : { //設定預設屬性
bodyStyle:'background-color:#FFFFFF;padding:15px'
//設定皮膚體的背景色
},
items: [
{
title : '巢狀皮膚一',
html : '說明一'
},
{
title : '巢狀皮膚二',
html : '說明二'
} ,
{
title : '巢狀皮膚三',
html : '說明三'
}
]
})
});
</script>
程式碼5-8所示Accordion佈局可以在多個不同的子皮膚之間切換，適合於表現大量的分組內容或製作可以伸展的分組選單，在開發中使用較多的佈局類，效果如圖5-12~5-13所示。

表5-6 Ext.layout.CardLayout主要方法表

下面是卡片式佈局的一個簡單的示例。
程式碼5-9：CardLayout（卡片式佈局）示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout : 'card',
activeItem : 0, //設定預設顯示第一個子皮膚
title:'Ext.layout.CardLayout佈局示例',
frame:true, //渲染皮膚
height : 150,
width : 250,
applyTo :'panel',
defaults : { //設定預設屬性
bodyStyle:'background-color:#FFFFFF;padding:15px' //設定皮膚體的背景色
},
items: [
{
title : '巢狀皮膚一',
html : '說明一',
id : 'p1'
},
{
title : '巢狀皮膚二',
html : '說明二',
id : 'p2'
},
{
title : '巢狀皮膚三',
html : '說明三',
id : 'p3'
}
],
buttons:[
{
text : '上一頁',
handler :changePage
},
{
text : '下一頁',
handler :changePage
}
]
})
//切換子皮膚
function changePage(btn){
var index = Number(panel.layout.activeItem.id.substring(1));
if(btn.text == '上一頁'){
index -= 1;
if(index <1){
index = 1;
}
}else{
index += 1;
if(index >3){
index = 3;
}
}
panel.layout.setActiveItem('p'+index);
}
});
</script>
程式碼 5-9 演示了 CardLayout 卡片式佈局的使用方式，這裡的重點是呼叫皮膚佈局的setActiveItem方法啟用指定id的子皮膚進行顯示，其中changePage函式的用途是計算點選上一頁或下一頁之後將要顯示的子皮膚id，然後將該id傳入到setActiveItem方法中實現子皮膚的切換。執行效果如圖5-14~5-15所示。

Ext.layout.AnchorLayout 是根據容器大小為其所包含的子皮膚進行定位的佈局，對應皮膚佈局（layout）配置項的名稱為 anchor。如果容器大小發生變化，所有子皮膚的位置都會根據規則重新計算，並自動渲染。使用anchor佈局需要注意以下配置項的使用。
anchorSize（父容器提供）
anchor 佈局提供了 anchorSize 配置項用來設定虛擬容器的大小，預設情況下 anchor 佈局是根據容器自身的大小來進行計算定位的，如果提供了 anchorSize 屬性則 anchor 佈局就會根據該尺寸生成一個虛擬容器，然後根據這個虛擬容器的大小來進行計算定位。
anchor（子容器提供）
加入到使用 anchor佈局皮膚中的子皮膚也都支援一個 anchor配置項，它是一個包含 2個值的字串，水平值和垂直值，例如：'100% 50%'，這個值告知父容器應該怎樣為加入到其中的子皮膚進行定位，有效值包括如下3類。
百分比（Percentage）：1-100之間的任意百分比，第1項數值表示子皮膚佔父容器寬度的百分比，第2項數值表示子皮膚佔父容器寬高的百分比，例如'100% 50%'表示，子皮膚寬度為父容器的 100%，而高度為父容器的 1/2，如果只提供一個值（如：'50%'）則只對子皮膚的寬度生效，高度保持預設值。
偏移值（Offsets）：任意整數，可以為正數也可以是負數，第1項數值表示子皮膚到父容器右邊緣的偏移量，第2項數值表示子皮膚到父容器下邊緣的偏移量，例如'-50 -100'表示，子皮膚距父容器的右邊緣偏移50畫素，即子皮膚的寬度為父容器的寬度減去50畫素；子皮膚距父容器的下邊緣偏移100畫素，即子皮膚高度為父容器的高度減去100畫素。如果只提供一個值（如：'-50'）則只對子皮膚的寬度生效，高度保持預設值。
參考邊（Sides）：有效的值包括 'right'（或 'r'）和'bottom'（或 'b'）。要求容器設定固定的大小或提供相應的anchorSize配置項才會有正確的效果，例如'r b'，說明父容器會計算與子容器寬度和高度的差值，然後按父容器體（body）的實際寬度和高度減去這個差值，重新為子皮膚定位。
以上3種賦值型別可以組合使用，例如'-50 75%'，下面將分別針對這3種情況舉例說明。
1. 百分比（Percentage）定位
在程式碼 5-10 中建立一個使用百分比方式為子皮膚進行定位的示例，從示例中可以清晰的體會到百分比定位的特點。
程式碼5-10：百分比（Percentage）定位示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout : 'anchor',
title:'Ext.layout.AnchorLayout佈局示例',
frame:false, //渲染皮膚
height : 150,
width : 300,
applyTo :'panel',
defaults : { //設定預設屬性
bodyStyle:'background-color:#FFFFFF;padding:15px' //設定皮膚體的背景色
},
items: [
{
anchor : '50% 50%', //設定子皮膚的寬高為父皮膚的50%
title : '子皮膚'
}
]
})
});
</script>
程式碼5-10演示了百分比（Percentage）定位的使用方式，其中anchor : '50% 50%'決定了子皮膚的高度和寬度都為父皮膚的50%。執行效果如圖5-16所示。

圖5-16 Ext.layout.AnchorLayout佈局示例（百分比定位）
2. 偏移值（Offsets）定位
在程式碼 5-11 中建立一個使用偏移值為子皮膚進行定位的示例，從示例中可以清晰的體會到偏移值定位的特點。
程式碼5-11：偏移值（Offsets）定位示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout : 'anchor',
title:'Ext.layout.AnchorLayout佈局示例',
frame:false,//渲染皮膚
height : 150,
width : 300,
applyTo :'panel',
defaults : {//設定預設屬性
bodyStyle:'background-color:#FFFFFF;padding:15px'//設定皮膚體的背景色
},
items: [
{
anchor : '-10 -10', //設定子皮膚的寬高偏移父皮膚10畫素
title : '子皮膚'
}
]
})
});
</script>
程式碼5-11演示了偏移值（Offsets）定位的使用方式，其中anchor : '-10 -10',決定了子皮膚到父皮膚的右邊和下邊都為10畫素。執行效果如圖5-17所示。

圖5-17 Ext.layout.AnchorLayout佈局示例（偏移值定位）
3. 參考邊（Sides）定位
在程式碼 5-12 中建立一個使用參考邊為子皮膚進行定位的示例，從示例中可以清晰的體會到參考邊定位的特點。
程式碼5-12：參考邊（Sides）定位示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout : 'anchor',
title:'Ext.layout.AnchorLayout佈局示例',
autoScroll :true,//自動顯示滾動條
frame:false,//渲染皮膚
height : 150,
width : 300,
applyTo :'panel',
defaults : {//設定預設屬性
bodyStyle:'background-color:#FFFFFF;padding:15px'//設定皮膚體的背景色
},
items: [
{
anchor : 'r b', //相對於父容器的右邊和底邊的差值進行定位
width : 200,
height : 100,
title : '子皮膚'
}
]
})
});
</script>
程式碼5-12演示了參考邊（Sides）定位的使用方式，其中anchor : 'r b',,決定了子皮膚將相對於父皮膚的右邊和底邊的差值進行定位。執行效果如圖5-18所示。

圖5-18 Ext.layout.AnchorLayout佈局示例（參考邊定位）

在程式碼5-12中使用參考邊為子皮膚進行定位，下面給出了計算過程的簡要說明：
寬度計算：
父容器體(body)寬度為 = 298（說明：300減去左右兩條邊的寬度）
寬度差值為 = 100（說明：父容器體(body)寬度300 – 子容器寬度200）
計算後的子容器寬度為 = 198（說明： 298 - 100）
高度計算：
父容器體(body)高度為 = 123（說明：150減去上下兩條邊的寬度和header的高度）
高度差值為 = 50（說明：父容器高度150 – 子容器高度100）
計算後的子容器高度為 = 73（說明：123 -50）

 
6 AbsoluteLayout絕對位置佈局

Ext.layout.AbsoluteLayout擴充套件自Ext.layout.AnchorLayout佈局，對應皮膚佈局（layout）配置項的名稱為 absolute。它可以根據子皮膚中配置的 x/y座標進行定位，並且座標值支援使用固定值和百分比兩種形式。下面是絕對位置佈局的簡單的示例。
程式碼5-13：AbsoluteLayout絕對位置佈局示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
layout : 'absolute',
title:'Ext.layout.AbsoluteLayout佈局示例',
frame:false, //渲染皮膚
height : 150,
width : 300,
applyTo :'panel',
defaults : { //設定預設屬性
bodyStyle:'background-color:#FFFFFF;padding:15px' //設定皮膚體的背景色
},
items: [
{
x : '10%', //橫座標為距父容器寬度10%的位置
y : 10, //縱座標為距父容器上邊緣10畫素的位置
width : 100,
height : 50,
title : '子皮膚一'
},
{ x:90, //橫座標為距父容器左邊緣90畫素的位置
y : 70, //縱座標為距父容器上邊緣70畫素的位置
width : 100,
height : 50,
title : '子皮膚二'
}
]
})
});
</script>
程式碼5-13演示了AbsoluteLayout（絕對位置佈局）的使用方式，在示例中子皮膚的x、y配置項決定了它在父皮膚中的具體位置。執行效果如圖5-19所示。

圖5-19 Ext.layout.AbsoluteLayout佈局示例

Ext.layout.FormLayout是為表單特殊設計的佈局，用來管理表單欄位的顯示，通常情況下直接使用Ext.form.FormPanel表單皮膚，因為它已經內建了表單佈局，並且提供了表單提交、讀取等表單的功能。使用form佈局的容器可以使用是些表單特有的配置項，它們包括：
hideLabels: (Boolean) ：是否隱藏欄位標籤，預設為false。
itemCls: (String) ：每個欄位項和欄位標籤上的樣式類，預設值為'x-form-item'。
labelAlign: (String) ： 欄位標籤的對齊方式，預設為空表示左對齊。
labelPad: (Number) ： 欄位標籤與欄位直接的空白，預設為 5，該項只在提供labelWidth配置項的情況下生效。
labelWidth: (Number) ：欄位標籤的寬度，預設為100。 任何元件都可以加入到表單佈局的容器當中，但是擴充套件自 Ext.form.Field 類的元件可以支援一些表單項的特殊屬性，它們包括：
clearCls: (String) ：應用到專門的清除div上的樣式，預設為'x-form-clear-left'。
fieldLabel: (String) ：欄位標籤上的文字，預設為''。
hideLabel: (Boolean) ：設定是否隱藏標籤和分割符，預設為false。
itemCls: (String) ：應用到表單欄位及標籤上的樣式類，預設為'x-form-item'。
labelSeparator: (String) ：欄位標籤和欄位本身直接的分隔符，預設為':'。
labelStyle: (String) ：應用到欄位標籤上的樣式類。
Ext.layout.FormLayout主要配置專案如表5-7所示。

表5-7 Ext.layout.FormLayout主要配置專案表

下面是表單佈局的簡單的示例，在示例中建立了一個包含使用者名稱和密碼2個輸入欄位的皮膚，這個皮膚最終生成的效果與第4章中介紹的FormPanel相同。
程式碼5-14： FormLayout（表單佈局）示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
var panel = new Ext.Panel({
title:'Ext.layout.FormLayout佈局示例',
layout : 'form',
labelSeparator : '：', //在容器中指定分隔符
frame:true, //渲染皮膚
height : 110,
width : 300,
applyTo :'panel',
defaultType: 'textfield', //指定容器子元素預設的xtype型別為textfield
defaults : { //設定預設屬性
msgTarget: 'side' //指定預設的錯誤資訊提示方式
},
items: [
{
fieldLabel:'使用者名稱',
allowBlank :false
},
{
fieldLabel:'密碼',
allowBlank :false
}
]
})
});
</script>
程式碼5-14演示了 FormLayout（表單佈局）的使用方式，通過表單佈局建立的皮膚與使用FormPanel建立的表單皮膚功能相同。執行效果如圖5-20所示。

圖5-20 Ext.layout.FormLayout佈局示例

Ext.layout.ColumnLayout對應皮膚佈局layout配置項的名稱為column。這是一種多列風格的佈局樣式，每一列的寬度都可以根據百分比或固定值來進行設定，高度允許根據內容進行變化，它支援一個特殊的屬性 columnWidth，每一個加入到容器中的子皮膚都可以通過columnWidth配置項指定百分比或使用width配置項指定固定值，來確定列寬。 width 配置項是以畫素為單位的固定寬度，必須是大於或等於 1 的數字。columnWidth配置項是已百分比為單位的相對寬度，必須是大於0小於1的小數，例如“.25”。
注意：所有列的columnWidth值相加必須等於1。
1. 指定固定列寬
程式碼 5-15 中將建立了包含 2 個子皮膚的列布局示例，並指定列的固定寬度為 100，看下面的程式碼。
程式碼5-15：指定固定列寬示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
var panel = new Ext.Panel({
title:'Ext.layout.ColumnLayout佈局示例',
layout : 'column',
frame:true,//渲染皮膚
height : 150,
width : 250,
applyTo :'panel',
defaults : {//設定預設屬性
bodyStyle:'background-color:#FFFFFF;',//設定皮膚體的背景色
frame :true
},
items: [
{
title:'子皮膚一',
width:100, //指定列寬為100畫素
height : 100
},
{
title:'子皮膚二',
width:100, //指定列寬為100畫素
height : 100
}
]
})
});
</script>
程式碼5-15演示了ColumnLayout（列布局）指定固定列寬的用法，子皮膚的width配置
項用於設定列寬。執行效果如圖5-21所示。

圖5-21 Ext.layout.ColumnLayout佈局示例（固定列寬）
2. 使用百分比指定列寬
在程式碼5-16中將建立了一個包含2個子皮膚的列布局示例，並分別指定列的相對寬度 為30%和70%（30%用.3表示,70%用.7表示），看下面的程式碼。
程式碼5-16：使用百分比指定列寬示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
var panel = new Ext.Panel({
title:'Ext.layout.ColumnLayout佈局示例',
layout : 'column',
frame:true,//渲染皮膚
height : 150,
width : 250,
applyTo :'panel',
defaults : {//設定預設屬性
bodyStyle:'background-color:#FFFFFF;',//設定皮膚體的背景色
frame :true
},
items: [
{
title:'子皮膚一',
columnWidth:.3, /指定列寬為容器寬度的30%
height : 100
},
{
title:'子皮膚二',
columnWidth:.7, //指定列寬為容器寬度的70%
height : 100
}
]
})
});
</script>
程式碼 5-16 演示了 ColumnLayout（列布局）使用百分比指定列寬的用法，子皮膚的
columnWidth配置項用於設定列對應的百分比。執行效果如圖5-22所示。

圖5-22 Ext.layout.ColumnLayout佈局示例（百分比列寬）
3. 固定值與百分比結合使用
在程式碼5-17中建立了包含3個子皮膚的列布局示例，為“子皮膚一”指定固定寬度100，“子皮膚二”相對寬度為30%，“子皮膚三”的相對寬度為70%，請看下面的程式碼。
程式碼5-17：固定值與百分比結合使用示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
var panel = new Ext.Panel({
title:'Ext.layout.ColumnLayout佈局示例',
layout : 'column',
frame:true,//渲染皮膚
height : 150,
width : 350,
applyTo :'panel',
defaults : {//設定預設屬性
bodyStyle:'background-color:#FFFFFF;',//設定皮膚體的背景色
frame :true
},
items: [
{
title:'子皮膚一',
width : 100, //指定列寬為100畫素
height : 100
},
{
title:'子皮膚二',
columnWidth:.3, /指定列寬為容器剩餘寬度的30%
height : 100
},
{
title:'子皮膚三',
columnWidth:.7, /指定列寬為容器剩餘寬度的70%
height : 100
}
]
})
});
</script>
在程式碼5-17中同時使用了固定值和百分比兩種方式來指定列寬，通過觀察圖5-17可以看到，固定值優先於百分比進行計算，也就是說百分比計算的基礎寬度是父容器的寬度減去固定列寬之後剩餘的寬度值。執行效果如圖5-23所示。

圖5-23 Ext.layout.ColumnLayout佈局示例（固定值與百分比結合）

下面以一個簡單的公式進行說明：
第一列寬度 = 100 （說明，第一列是通過width配置項指定的固定值）。
第二列寬度 = （350 – 100 ）* 0.3 （說明：按比例分割剩餘寬度）。
第三列寬度 = （350 – 100 ）* 0.7 （說明：按比例分割剩餘寬度）。

9 TableLayout表格佈局

Ext.layout.TableLayout對應皮膚佈局layout配置項的名稱為table。這種比較允許你非常容易的渲染內容到HTML表格中，可以指定列數（columns），跨行（rowspan），跨列（colspan），可以建立出複雜的表格佈局。
注意：必須使用layoutConfig屬性來指定屬於此佈局的配置，table佈局僅有唯一的佈局配置項columns，而包含在其中的子皮膚會具有rowspan和colspan兩個配置項。
下面是表格佈局的一個簡單的示例。
程式碼5-18：TableLayout（表格佈局）示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
title:'Ext.layout.TableLayout佈局示例',
layout :'table',
layoutConfig :{
columns : 4 //設定表格佈局預設列數為4列
},
frame:true,//渲染皮膚
height : 150,
applyTo :'panel',
defaults : {//設定預設屬性
bodyStyle:'background-color:#FFFFFF;',//設定皮膚體的背景色
frame :true,
height : 50
},
items: [
{
title:'子皮膚一',
colspan : 3 //設定跨列
},
{
title:'子皮膚二',
rowspan :2, /設定跨行
height : 100
},
{title:'子皮膚三'},
{title:'子皮膚四'},
{title:'子皮膚五'}
]
})
});
</script>
程式碼5-18演示了TableLayout（表格佈局）的使用方式，其中子皮膚的colspan和rowspan配置項決定了它跨列和跨行的數量，另外需要指出的是，子皮膚在父皮膚中是從上到下由左至右進行順序排列的。效果如圖5-24所示。

圖5-24 Ext.layout.TableLayout佈局示例

Ext.layout.BorderLayout 對應皮膚佈局 layout 配置項的名稱為 border。該佈局包含多個子皮膚，是一個面向應用的UI風格的佈局，它將整個容器分為5個部分，分別是：east、south、west、north、center。加入到容器中的子皮膚需要指定region 配置項來告知容器要加入到那個部分，並且該佈局還內建了對皮膚分隔欄的支援。下面是邊框佈局的一個簡單的示例。
為了進行說明，將在程式碼5-19中建立一個包含全部border佈區域性分的示例，這個示例可以形象的展示border佈局的結構。
程式碼5-19：BorderLayout（邊框佈局）示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
title : 'Ext.layout.BorderLayout佈局示例',
layout:'border',//表格佈局
height : 250,
width : 400,
applyTo : 'panel',
items: [
{
title: 'northPanel',
html : '上邊',
region: 'north', //指定子皮膚所在區域為north
height: 50
},
{
title: 'SouthPanel',
html : '下邊',
region: 'south', //指定子皮膚所在區域為south
height: 50
},{
title: 'West Panel',
html : '左邊',
region:'west', //指定子皮膚所在區域為west
width: 100
},{
title: 'east Panel',
html : '右邊',
region:'east', //指定子皮膚所在區域為east
width: 100
},{
title: 'MainContent',
html : '中間',
region:'center' //指定子皮膚所在區域為center
}]
});
});
</script>
執行程式碼5-19會得到如下頁面效果，從圖中可以看到整個頁面分為5個部分，這裡重點是對region配置項的使用，它決定了子皮膚在border佈局的顯示，效果如圖5-25所示。