面板相當于一張干凈的白紙，如果直接在上面添加內容，將很難控制面板中內容的顯示位置，面板元素越多就越顯得凌亂，所以需要在面板上劃分不同的區域，將面板內容展示到希望的位置上。ExtJS通過提供多種布局類來為面板提供支持，主要包括如下10種：
ContainerLayout（容器布局）
FitLayout（自適應布局）
AccordionLayout（折疊布局）
CardLayout（卡片式布局）
AnchorLayout（錨點布局）
AbsoluteLayout（絕對位置布局）
FormLayout（表單布局）
ColumnLayout（列布局）
TableLayout（表格布局）
BorderLayout（邊框布局）
接下來分別介紹這10種布局類的特點及使用方式。
1 ContainerLayout容器布局
Ext.layout.ContainerLayout 提供了所有布局類的基本功能，它沒有可視化的外觀，只是提供容器作為布局的基本邏輯，這個類通常被擴展而不通過 new 關鍵字直接創建。如果面板（panel）沒有指定任何布局類，則它將會作為默認布局來創建，表5-4是主要配置項。
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布局示例3 AccordionLayout折疊布局
Ext.layout.Accordion 擴展自 Ext.layout.FitLayout 布局，對應面板布局（layout）配置項的名稱為accordion。該布局會包含多個子面板，任何時候都只有一個子面板處于打開狀態，每個子面板都內置了對展開和收縮功能的支持。表5-5列出了它的主要配置項目。
表5-5 Ext.layout.Accordion主要配置項目表
|
配置項 |
|
參數類型 |
說明 |
|
activeOnTop |
|
Boolean |
是否保持展開的子面板處于父面板的頂端，true則交換當前展開面板到頂端，false則保持原來的位置不動。 |
|
animate |
|
Boolean |
設置在展開或收縮子面板時是否使用滑動方式，true則采用滑動方式，默認為false。 |
|
fill |
|
Boolean |
設置子面板是否自動調整高度充滿父面板的剩余空間，true則充滿，默認為true。 |
|
hideCollapse |
Tool |
Boolean |
設置是否隱藏子面板的 “展開收縮” 按鈕，true表示隱藏，false表示顯示，默認為false。如果設置為true，則應使titleCollapse配置項也為true。 |
|
titleCollapse |
|
Boolean |
設置是否允許通過點擊子面板的標題來展開或收縮面板，true表示允許，默認為true。 |
下面是折疊布局的一個簡單的示例。
代碼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所示。
4 CardLayout卡片式布局
Ext.layout.CardLayout擴展自Ext.layout.FitLayout布局，對應面板布局（layout）配置項的名稱為 card。該布局會包含多個子面板，任何時候都只有一個子面板處于顯示狀態，這種布局類經常用來制作向導和標簽頁。該布局的重點方式是 setActiveItem，因為一次只能顯示一個子面板，所以切換子面板的唯一途徑就是調用 setActiveItem 方法，它接受一個子面板id或索引作為參數。CardLayout布局并沒有提供一個子面板的導航機制，導航邏輯需要開發人員自己實現。 Ext.layout.CardLayout主要方法如表5-6所示。
表5-6 Ext.layout.CardLayout主要方法表
|
|
方法名 |
|
|
說明 |
|
setActiveItem( |
String/Number item ) : void |
根據子面板 |
id |
或索引切換當前顯示的子面板 |
下面是卡片式布局的一個簡單的示例。
代碼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所示。
5 AnchorLayout錨點布局
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布局示例7 FormLayout表單布局
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主要配置項目表
|
配置項 |
參數類型 |
說明 |
|
elementStyle |
String |
應用到每一個布局中元素上的樣式類，默認為'' |
|
labelSeparator |
String |
字段標簽與字段本身直接的分隔符，默認為':'。如果布局和面板中同時配置了labelSeparator，則面板中的設置會覆蓋布局中的設置。 |
|
labelStyle |
String |
應用到每一個字段標簽上的樣式類，默認為''。 |
下面是表單布局的簡單的示例，在示例中創建了一個包含用戶名和密碼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布局示例8 ColumnLayout列布局
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布局示例10 BorderLayout邊框布局
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所示。
