ExtJS的使用方法匯總(5)——布局
文章目錄
一、傳統的布局方式
二、最常用的邊框布局BorderLayout
三、製作伸縮菜單的布局——Accordion
所謂布局，簡單來說就是決定把什麼東西放到什麼位置上，對於管理軟體來說，一般都是首部放標題，左邊放功能表列，空餘的右下方用來顯示具體的內容。本章將詳細介紹EXT中布局的用法。
一、傳統的布局方式
我們可以用Ext.Viewport類對整個頁面進行整體布局，具體使用方法如下：
var viewport=new Ext.Viewport({
layout:'border',
items:[{
region:'north',
height:40,
html:'
薛敬明專欄
'},{
region:'west',
width:100,
html:'
菜單一
菜單二
'},{
region:'center',
html:'主要內容'
}]
});
1所示：
圖1 傳統的布局形式
二、最常用的邊框布局BorderLayout
Ext.layout.BorderLayout布局把整個布局地區分成東、西、南、北、中5個部分，除了中間地區以外，其他的地區又都是可以省略的，因此我們可以利用它製作出更複雜、更靈活的布局。具體代碼如下：
var viewport2=new Ext.Viewport({
layout:'border',
items:[{
region:'north',html:'north'
},{
region:'south',html:'south'
},{
region:'east',html:'east'
},{
region:'west',html:'west'
},{
region:'center',html:'center'
}]
});
2所示。
圖2 使用BorderLayout的布局
注意：center是絕對不能省略的，如果items中缺少了region:'center'就會報錯，會造成程式中斷。
2.1 設定子領域的大小
我們僅僅需要添加width和height參數，這樣就可以指定每個子領域的大小了。但是，north和south兩個地區只能指定高度值，寬度值由BorderLayout自動計算；east和west只能指定寬度值，高度值由BorderLayout自動計算；center地區的大小由其他4個部分決定。設定的代碼如下所示：
var viewport2=new Ext.Viewport({
layout:'border',
items:[{
region:'north',html:'north',height:120
},{
region:'south',html:'south'
},{
region:'east',html:'east'
},{
region:'west',html:'west',width:40
},{
region:'center',html:'center'
}]
});
2.2 使用split並限制它的範圍
使用split後，我們可以允許使用者自動拖放以改變某一個地區的大小，實現的方式只要設定split:true參數即可實現，具體代碼如下。
實現3所示。
var viewport=new Ext.Viewport({
layout:'border',
items:[{
region:'north',
height:40,
html:'
薛敬明專欄
'},{
region:'west',
html:'
菜單一
菜單二
',width:100,
split:true
},{
region:'center',
html:'主要內容'
}]
});
圖3 設定split:true後的
2.3 子領域的展開和摺疊
該功能可以讓一個地區展開和摺疊(相當於隱藏)，實現的方式只需要配置幾個參數即可，具體代碼如下，主要配置參數是collapsible:true，這個參數啟用了某個地區的摺疊功能，而且前面的title參數也是必須設定的。實現代碼和如下所示。
var viewport=new Ext.Viewport({
layout:'border',
items:[{
region:'north',
height:40,
html:'
薛敬明專欄
'},{
region:'west',
html:'
菜單一
菜單二
',title:'west',
width:100,
//split:true
collapsible:true
},{
region:'center',
html:'主要內容'
}]
});
圖4 帶有摺疊效果的布局
三、製作伸縮菜單的布局——Accordion
Accordion是EXT中預設布局的一部分，如果想用它，直接將地區加上layout:'accordion'即可，其他部分基本無需改動。我們利用ViewPort製作出只有west和center兩個地區的BorderLayout，在west部分放上Accordion，實現方式如下面代碼所示。
var viewport=new Ext.Viewport({
layout:'border',
items:[{
region:'west',
width:200,
layout:'accordion',
layoutConfig:{
titleCollapse:true,
animate:true,
activeOnTop:false
},
items:[{
title:'第一欄',
html:'第一欄'
},{
title:'第二欄',
html:'第二欄'
},{
title:'第三欄',
html:'第三欄'
}]
},{
region:'center',
split:true,
border:true
}]
});
5所示。
圖5 使用了Accordion的樣本
設定了layout:'accordion'後，再使用items添加3個元素，記得每個子項目裡都要加上title參數，accordion沒有提供預設的標題，不設定標題是一定會出錯的。與布局有關的配置項都寫到layoutConfig裡。