所謂布局，簡(jiǎn)單來(lái)說(shuō)就是決定把什么東西放到什么位置上，對(duì)于管理軟件來(lái)說(shuō)，一般都是首部放標(biāo)題，左邊放菜單欄，空余的右下方用來(lái)顯示具體的內(nèi)容。本章將詳細(xì)介紹EXT中布局的用法。

一、傳統(tǒng)的布局方式

我們可以用Ext.Viewport類(lèi)對(duì)整個(gè)頁(yè)面進(jìn)行整體布局，具體使用方法如下：

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

效果圖如圖1所示：

圖1 傳統(tǒng)的布局形式 

二、最常用的邊框布局BorderLayout

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

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是絕對(duì)不能省略的，如果items中缺少了region:'center'就會(huì)報(bào)錯(cuò)，會(huì)造成程序中斷。

2.1 設(shè)置子區(qū)域的大小

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

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后，我們可以允許用戶(hù)自動(dòng)拖放以改變某一個(gè)區(qū)域的大小，實(shí)現(xiàn)的方式只要設(shè)置split:true參數(shù)即可實(shí)現(xiàn)，具體代碼如下。

實(shí)現(xiàn)效果圖如圖3所示。

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

圖3 設(shè)置split:true后的效果圖

2.3 子區(qū)域的展開(kāi)和折疊

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

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

圖4 帶有折疊效果的布局

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

Accordion是EXT中默認(rèn)布局的一部分，如果想用它，直接將區(qū)域加上layout:'accordion'即可，其他部分基本無(wú)需改動(dòng)。我們利用ViewPort制作出只有west和center兩個(gè)區(qū)域的BorderLayout，在west部分放上Accordion，實(shí)現(xiàn)方式如下面代碼所示。

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的示例

設(shè)置了layout:'accordion'后，再使用items添加3個(gè)元素，記得每個(gè)子元素里都要加上title參數(shù)，accordion沒(méi)有提供默認(rèn)的標(biāo)題，不設(shè)置標(biāo)題是一定會(huì)出錯(cuò)的。與布局有關(guān)的配置項(xiàng)都寫(xiě)到layoutConfig里。

• 布局