布局概述
在EXT中，所有的布局都是從Ext.Container開始的，Ext.Container的父類是Ext.BoxComponent。Ext.BoxComponent是一個盒子組件，可以定義寬度，高度和位置等屬性。作為子類，Ext.Container也繼承了這些功能，更重要的是，Ext.Container可以使用layout和items屬性未作內(nèi)部的子組件進(jìn)行布局。
事實(shí)上，我們經(jīng)常用來設(shè)置布局的子類也只有幾個，比如用Ext.Viewport進(jìn)行頁面的整體布局，使用Ext.Panel和Ext.Window進(jìn)行各種嵌套布局，使用Ext.form.FieldSet和Ext.form.FormPanel為表單進(jìn)行布局。其余的子類都使用默認(rèn)的渲染形式，很少進(jìn)行內(nèi)部布局。
與Ext.Container相似，所有的布局類也有一個共同的超類Ext.layout.ContainerLayout。凡是繼承該超類的子類都可以對Ext.Container和它的子類進(jìn)行布局定義，這兩顆繼承樹結(jié)合在一起便構(gòu)成了EXT中完整的布局系統(tǒng)。
最簡單的布局FitLayout
1
var viewport = new Ext.Viewport(
{
2
layout:'fit',
3 items:[grid]
4
})
它可以自動適應(yīng)頁面大小的變化，填充整個頁面。但如果在items中放入兩個控件，會發(fā)現(xiàn)第二個控件沒有任何效果。即FitLayout布局每次只能使用一個子組件。
常用的邊框布局BorderLayout
它將整個布局區(qū)域分成了東、西、南、北、中5個部分，除了中間區(qū)域以外，其他的區(qū)域又都是可以省略的。
var viewport = 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'}
]
});
重復(fù)一遍，center是絕對不能省的，否則會報錯導(dǎo)致程序中斷。
在此布局中，north和south可以通過設(shè)置height來設(shè)置高度(也只能設(shè)置高度)；west和east部分可以通過設(shè)置width來設(shè)置寬度(也只能設(shè)置寬度)；同時，我們可以使用split來允許用戶自行拖放以改變某一個區(qū)域的大小。如：
1var viewport = new Ext.Viewport({
2 layout:'border',
3 items:[
4 {region:'north',html:'north'},
5 {region:'west',html:'west',width:100,split:true},
6 {region:'center',html:'center'}
7 ]
8})
當(dāng)然，在使用split屬性時，我們也可以搭配minSize和MaxSize屬性來控制最小高度和最大高度。
使用collapsible:true激活了區(qū)域的折疊功能，這需要搭配title參數(shù)一起使用。
制作伸縮菜單的布局----Accordion
1var 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});
實(shí)現(xiàn)操作向?qū)У牟季?---CardLayout
CardLayout可以看做是一疊卡片，從上面看起來就像是一張卡片，可以把中間的卡片抽出來，放到最上面，可以每次只能看到一張卡片。
1var viewport = new Ext.Viewport({
2 layout:'border',
3 items:[{
4 region:'west',
5 id:'wizard',
6 width:200,
7 title:'某某向?qū)?,
8 layout:'card',
9 activeItem:0,
10 bodyStyle:'padding:15px',
11 defaults:{
12 border:false
13 },
14 bbar:[{
15 id:'move-prev',
16 text:'上一步',
17 handler:navHandler.createDelegate(this,[-1]),
18 disalbed:true
19 },'->',{
20 id:'move-next',
21 text:'下一步',
22 handler:navHandler.createDelegate(this,[1])
23 }],
24 items:[{
25 id:'card-0',
26 html:'<h1>哈哈！<br/>歡迎用咱的向?qū)А?/span></h1><p>第一步，一共三步</p>'
27 },{
28 id:'card-1',
29 html:'<p>第二步，一共三步</p>'
30 },{
31 id:'card-2',
32 html:'<h1>恭喜恭喜，完成了</p>'
33 }]
34 },{
35 region:'center',
36 split:true,
37 border:true
38 }]
39});
40
示例代碼實(shí)現(xiàn)了大致的邏輯，但控制上下頁翻頁的代碼(handler)未詳細(xì)給出。
控制位置和大小的布局----AnchorLayout和AbsoluteLayout
AnchorLayout提供了一種靈活的布局方式，即可以為item中的每個組件指定與總體布局大小的差值，也可以設(shè)置一個比例使子組件可以根據(jù)整體自行計(jì)算本身的大小。它為我們提供給了三種配置方式。
第一種方式是使用百分比進(jìn)行配置，我們可以設(shè)置某一個子組件占整體長和寬的百分比。如：
1 var viewport = new Ext.Viewport({
2 layout:'anchor',
3 items:[{
4 title:'panel 1',
5 html:'panel 1',
6 anchor:'50% 50%'
7 },{
8 title:'panel 2',
9 html:'panel 2',
10 anchor:'80%'
11 }]
12 });
第二種方式是直接設(shè)置與右側(cè)和底部的邊距，如：
1 var viewport = new Ext.Viewport({
2 layout:'anchor',
3 items:[{
4 title:'panel 1',
5 html:'panel 1',
6 anchor:'-50 -200'
7 },{
8 title:'panel 2',
9 html:'panel 2',
10 anchor:'-100'
11 }]
12 });
13});
第三種方式稱為side。使用它的前提是：為作為布局整體的父組件和布局內(nèi)部的子組件都設(shè)置好width、height和anchorSize屬性。AnchorLayout會記錄布局整體與子組件的大小上的差值，為以后調(diào)整布局提供依據(jù)。
1 var viewport = new Ext.Viewport({
2 layout:'anchor',
3 anchorSize:{width:400,height:300},
4 items:[{
5 title:'panel 1',
6 html:'panel 1',
7 width:200,
8 height:100,
9 anchor:'r b'
10 },{
11 title:'panel 2',
12 html:'panel 2',
13 width:100,
14 height:200,
15 anchor:'r b'
16 }]
17 });
我們?yōu)閂iewport設(shè)置了anchorSize，這是一個包含寬度和高度信息的JSON對象，以此作為以后計(jì)算差值的基準(zhǔn)。然后在panel 1和panel 2中設(shè)置寬度和高度的信息。anchor的設(shè)置只有anchor:'r b'一種，這是固定的寫法，也可以寫成anchor:'right buttom'，兩種寫法完全相同。
AbsoluteLayout是AnchorLayout的一個子類，繼承了AnchorLayout的所有特性。AnchorLayout布局下的子組件都是自上而下豎直排列的，不能控制每個組件的位置，而AbsolutLayout可以通過設(shè)置x，y參數(shù)達(dá)到控制子組件位置的效果。
表單專用的布局FormLayout
FormLayout也是AnchorLayout的一個子類，可以再它里面使用anchor設(shè)置寬和高的比例。但是它主要還是用于對表單進(jìn)行布局。首先要明白一點(diǎn)，Ext.form.FormPanel使用它作為默認(rèn)的布局方式。也正因?yàn)槭褂昧薋ormLayout布局，我們設(shè)置的fieldLabel、boxLabel才能顯示出來，而FormLayout里也提供給了一系列的參數(shù)來控制這些顯示效果。
hideLabels：是否隱藏field的標(biāo)簽
itemCls：表單顯示的樣式
labelAlign：標(biāo)簽的對齊方式
labelPad：標(biāo)簽空白的像素值
labelWidth：標(biāo)簽寬度
clearCls：清除div渲染的CSS樣式
fieldLabel：對應(yīng)field的標(biāo)簽內(nèi)容
hideLabel：是否隱藏標(biāo)簽
itemCls：Field的CSS樣式
labelSeparator：標(biāo)簽和field之間的分隔，默認(rèn)是：
labelStyle：標(biāo)簽的CSS樣式
分列式的布局ColumnLayout
1var viewport = new Ext.Viewport({
2 layout:'column',
3 items:[{
4 title:'Column 1',
5 columnWidth:.25
6 },{
7 title:'Column 2',
8 columnWidth:.4
9 },{
10 title:'Column 3',
11 columnWidth:.35
12 }]
13});
表格狀的布局TableLayout
1 var viewport = new Ext.Viewport({
2 layout:'fit',
3 items:[{
4 title:'Table Layout',
5 layout:'table',
6 defaults:{
7 bodyStyle:'padding:20px'
8 },
9 layoutConfig:{
10 columns:3
11 },
12 items:[{
13 html:'<p>Cell A content</p>',
14 rowspan:2
15 },{
16 html:'<p>Cell A content</p>',
17 colspan:2
18 },{
19 html:'<p>Cell C content</p>'
20 },{
21 html:'<p>Cell D content</p>'
22 }]
23 }]
24 });
25