ExtJS的使用方法彙總5——布局

所謂布局，簡單來說就是決定把什麼東西放到什麼位置上，對于管理軟體來說，一般都是首部放标題，左邊放菜單欄，空餘的右下方用來顯示具體的内容。本章将詳細介紹EXT中布局的用法。

一、傳統的布局方式

我們可以用Ext.Viewport類對整個頁面進行整體布局，具體使用方法如下：

[c-sharp]  view plaincopy

1. var viewport=new Ext.Viewport({  
2.                layout:'border',  
3.                items:[{  
4.                    region:'north',  
5.                    height:40,  
6.                    html:'<h1>李志勇專欄</h1>'
7.                },{  
8.                    region:'west',  
9.                    width:100,  
10.                    html:'<p>菜單一</p><p>菜單二</p>'
12.                    region:'center',  
13.                    html:'主要内容'
14.                }]  
15.            });  

效果圖如圖1所示：

圖1 傳統的布局形式

二、最常用的邊框布局BorderLayout

Ext.layout.BorderLayout布局把整個布局區域分成東、西、南、北、中5個部分，除了中間區域以外，其他的區域又都是可以省略的，是以我們可以利用它制作出更複雜、更靈活的布局。具體代碼如下：

1. var viewport2=new Ext.Viewport({  
2.    layout:'border',  
3.    items:[{  
4.        region:'north',html:'north'
5.    },{  
6.        region:'south',html:'south'
8.        region:'east',html:'east'
10.        region:'west',html:'west'
12.        region:'center',html:'center'
13.    }]  
14. });  

效果圖如圖2所示。

圖2 使用BorderLayout的布局

注意：center是絕對不能省略的，如果items中缺少了region:'center'就會報錯，會造成程式中斷。

2.1 設定子區域的大小

我們僅僅需要添加width和height參數，這樣就可以指定每個子區域的大小了。但是，north和south兩個區域隻能指定高度值，寬度值由BorderLayout自動計算；east和west隻能指定寬度值，高度值由BorderLayout自動計算；center區域的大小由其他4個部分決定。設定的代碼如下所示：

4.                    region:'north',html:'north',height:120  
6.                    region:'south',html:'south'
8.                    region:'east',html:'east'
10.                    region:'west',html:'west',width:40  
12.                    region:'center',html:'center'

2.2 使用split并限制它的範圍

使用split後，我們可以允許使用者自動拖放以改變某一個區域的大小，實作的方式隻要設定split:true參數即可實作，具體代碼如下。

實作效果圖如圖3所示。

4.        region:'north',                      
5.        height:40,  
6.        html:'<h1>薛敬明專欄</h1>'
8.        region:'west',                      
9.        html:'<p>菜單一</p><p>菜單二</p>',  
10.        width:100,  
11.        split:true
13.        region:'center',  
14.        html:'主要内容'

圖3 設定split:true後的效果圖

2.3 子區域的展開和折疊

該功能可以讓一個區域展開和折疊(相當于隐藏)，實作的方式隻需要配置幾個參數即可，具體代碼如下，主要配置參數是collapsible:true，這個參數激活了某個區域的折疊功能，而且前面的title參數也是必須設定的。實作代碼和效果圖如下所示。

2.               layout:'border',  
3.               items:[{  
4.                   region:'north',  
5.                   height:40,  
6.                   html:'<h1>薛敬明專欄</h1>'
7.               },{  
8.                   region:'west',                      
9.                   html:'<p>菜單一</p><p>菜單二</p>',  
10.                   title:'west',  
11.                   width:100,  
12. //split:true
13.                   collapsible:true
15.                   region:'center',  
16.                   html:'主要内容'
17.               }]  
18.           });  

圖4 帶有折疊效果的布局

三、制作伸縮菜單的布局——Accordion

Accordion是EXT中預設布局的一部分，如果想用它，直接将區域加上layout:'accordion'即可，其他部分基本無需改動。我們利用ViewPort制作出隻有west和center兩個區域的BorderLayout，在west部分放上Accordion，實作方式如下面代碼所示。

5.                    width:200,  
6.                    layout:'accordion',  
7.                    layoutConfig:{  
8.                        titleCollapse:true,  
9.                        animate:true,  
10.                        activeOnTop:false
11.                    },  
12.                    items:[{  
13.                        title:'第一欄',  
14.                        html:'第一欄'
15.                    },{  
16.                       title:'第二欄',  
17.                        html:'第二欄'
19.                       title:'第三欄',  
20.                        html:'第三欄'
21.                    }]  
24.                    split:true,  
25.                    border:true

效果圖如圖5所示。