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

一、傳統的布局方式

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

  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>'  
  11.                 },{  
  12.                     region:'center',  
  13.                     html:'主要內容'  
  14.                 }]  
  15.             });  

 

效果圖如圖1所示：

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'  
  7.     },{  
  8.         region:'east',html:'east'  
  9.     },{  
  10.         region:'west',html:'west'  
  11.     },{  
  12.         region:'center',html:'center'  
  13.     }]  
  14. });  

 

效果圖如圖2所示。 

2

圖2 使用BorderLayout的布局

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

2.1 設置子區域的大小

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

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

 

2.2 使用split并限制它的范圍

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

實現效果圖如圖3所示。

  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.         html:'<p>菜單一</p><p>菜單二</p>',  
  10.         width:100,  
  11.         split:true  
  12.     },{  
  13.         region:'center',  
  14.         html:'主要內容'  
  15.     }]  
  16. });  

 

3

圖3 設置split:true后的效果圖

2.3 子區域的展開和折疊

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

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

 

4

圖4 帶有折疊效果的布局

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

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

  1. var viewport=new Ext.Viewport({  
  2.                 layout:'border',  
  3.                 items:[{  
  4.                     region:'west',  
  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:'第二欄'   
  18.                     },{  
  19.                        title:'第三欄',  
  20.                         html:'第三欄'   
  21.                     }]  
  22.                 },{  
  23.                     region:'center',  
  24.                     split:true,  
  25.                     border:true  
  26.                 }]  
  27.             });  

 

效果圖如圖5所示。

5

圖5 使用了Accordion的示例

設置了layout:'accordion'后，再使用items添加3個元素，記得每個子元素里都要加上title參數，accordion沒有提供默認的標題，不設置標題是一定會出錯的。與布局有關的配置項都寫到layoutConfig里。