ExtJS的使用方法匯總(5)——布局

文章目錄

• 一、傳統的布局方式
• 二、最常用的邊框布局BorderLayout
• 三、製作伸縮菜單的布局——Accordion

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

一、傳統的布局方式

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

var viewport=new Ext.Viewport({<br /> layout:'border',<br /> items:[{<br /> region:'north',<br /> height:40,<br /> html:'<h1>薛敬明專欄</h1>'<br /> },{<br /> region:'west',<br /> width:100,<br /> html:'<p>菜單一</p><p>菜單二</p>'<br /> },{<br /> region:'center',<br /> html:'主要內容'<br /> }]<br /> });

1所示：

圖1 傳統的布局形式 

二、最常用的邊框布局BorderLayout

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

var viewport2=new Ext.Viewport({<br /> layout:'border',<br /> items:[{<br /> region:'north',html:'north'<br /> },{<br /> region:'south',html:'south'<br /> },{<br /> region:'east',html:'east'<br /> },{<br /> region:'west',html:'west'<br /> },{<br /> region:'center',html:'center'<br /> }]<br /> });

2所示。 

圖2 使用BorderLayout的布局

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

2.1 設定子領域的大小

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

var viewport2=new Ext.Viewport({<br /> layout:'border',<br /> items:[{<br /> region:'north',html:'north',height:120<br /> },{<br /> region:'south',html:'south'<br /> },{<br /> region:'east',html:'east'<br /> },{<br /> region:'west',html:'west',width:40<br /> },{<br /> region:'center',html:'center'<br /> }]<br /> });

2.2 使用split並限制它的範圍

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

實現3所示。

var viewport=new Ext.Viewport({<br /> layout:'border',<br /> items:[{<br /> region:'north',<br /> height:40,<br /> html:'<h1>薛敬明專欄</h1>'<br /> },{<br /> region:'west',<br /> html:'<p>菜單一</p><p>菜單二</p>',<br /> width:100,<br /> split:true<br /> },{<br /> region:'center',<br /> html:'主要內容'<br /> }]<br /> });

圖3 設定split:true後的

2.3 子領域的展開和摺疊

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

var viewport=new Ext.Viewport({<br /> layout:'border',<br /> items:[{<br /> region:'north',</p><p> height:40,<br /> html:'<h1>薛敬明專欄</h1>'<br /> },{<br /> region:'west',<br /> html:'<p>菜單一</p><p>菜單二</p>',<br /> title:'west',<br /> width:100,<br /> //split:true<br /> collapsible:true<br /> },{<br /> region:'center',<br /> html:'主要內容'<br /> }]<br /> });

圖4 帶有摺疊效果的布局

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

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

var viewport=new Ext.Viewport({<br /> layout:'border',<br /> items:[{<br /> region:'west',<br /> width:200,<br /> layout:'accordion',<br /> layoutConfig:{<br /> titleCollapse:true,<br /> animate:true,<br /> activeOnTop:false<br /> },<br /> items:[{<br /> title:'第一欄',<br /> html:'第一欄'<br /> },{<br /> title:'第二欄',<br /> html:'第二欄'<br /> },{<br /> title:'第三欄',<br /> html:'第三欄'<br /> }]<br /> },{<br /> region:'center',<br /> split:true,<br /> border:true<br /> }]<br /> });

5所示。

圖5 使用了Accordion的樣本

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