前言：  

只要是EXT.Container以及其之類都可以都可以使用Layout對其Items進行佈局 
 

簡單說明最常用到的6種佈局方式： 

一.最簡單的佈局：FitLayout  
Javascript程式碼  

1. new Ext.Viewport({  
2.  layout:'fit',  
3.  items:[oGrid]  //oGrid是一個表格
     
4. });  

注意： 
1.使用Fit佈局 items中只能有一個元件，如果你放置了多個元件，也只能是第一個用效。 
2.使用Fit佈局在元件中不能使用：autoHeight:true 否則會使FitLayout實效 



二.最常用的佈局：BorderLayout  
Javascript程式碼  

1. new Ext.Viewport({  
2.  layout:'border'
   ,  
3.  items:[  
4.  {region:'north',height:100},  
5.  {region:'south',height:100},  
6.  {region:'west',width:200},  
7.  {region:'east',width:200},  
8.  {region:'center'}  
9. ]  
10. });  

注意： 
1.center屬性值必須指定 
2.north,south 不要指定width 
3.west,east不要指定height 
4.不要使用autoHeight，autoWidth 
5.新增split:true屬性可以控制區域大小 



三.表單佈局：FormLayout  
Javascript程式碼  

1. new Ext.form.FormPanel({  
2.     layout:'form', //預設是FormLayout佈局（可寫可不寫）  
3.     items:[{  
4.         xtype:'textfield'  
5.         fieldLabel:'名稱',  
6.         name:'name',  
7.         anchor:'90%'  
8.     },{  
9.         xtype:'datefield',  
10.         fieldLabel:'生日',  
11.         name:'birthday',  
12.         anchor:'90%'  
13.     },{  
14.         xtype:'textfield',  
15.         fieldLabel:'性別',  
16.         name:'sex',  
17.         anchor:'90%'  
18.     }]  
19. });  

注意： 
1.從上面的繼承圖可以看出FormLayout是AnchorLayout的子類，因此可以在裡面使用anchor屬性設定大小比例 
2.FormLayout是FormPanel預設的佈局方式，因此可以不顯示寫出Layout:'form' 
3.fieldLabel，boxLabel在FormLayout佈局情況下才能顯示出來 



四.列布局：ColumnLayout  
Javascript程式碼  

1. new Ext.Viewport({  
2.     layout:'column',  
3.     itmes:[{  
4.         title:'第一列',  
5.         columnWidth:.3   //30%  
6.     },{  
7.         title:'第二列',  
8.         columnWidht:.3  //30%  
9.     },{  
10.         title:'第三列',  
11.         columnWidth:.4  //40%  
12.     }]  
13. });  

注意： 
1.items的每個子元件中的columnWidth加起來的和必須為1  


五.控制大小布局：AnchorLayout  
Javas程式碼  

1. new Ext.Viewport({  
2.     layout:'anchor',  
3.     itmes:[{  
4.         title:'one',  
5.         anchor:'50% 60%'//表示所佔寬度，高度的百分比  
6.     },{  
7.         title:'two',  
8.         anchor:'40%' //表示所佔寬度，高度百分比都是40%  
9.     },{  
10.         title:'three',  
11.         anchor:'-20 -100' //表示距離右側的20px,距離底部100px  
12.     },{  
13.         title:'four',  
14.         anchor:'-300'   //表示距離右側，底部都為300px  
15.     }]  
16. });  

六.伸縮摺疊佈局：Accordion  
Javascript程式碼  

1. 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:true,//展開的子面板的順序總在最上面  
11.         },  
12.         items:[{  
13.             title:'第一欄',  
14.             html:'one'  
15.         },{  
16.             title:'第二欄',  
17.             html:'two'  
18.         },{  
19.             title:'第三欄',  
20.             html:'three'  
21.         },{  
22.             title:'第四欄',  
23.             html:'four'  
24.         }]  
25.   
26.     },{  
27.         region:'center',  
28.         split:true,  
29.         border:true  
30.     }]  
31. });  

注意： 
1.使用Accordion佈局一定要設定標題：title 

2.與佈局有關(所有佈局方式都可以)的引數屬性都可以寫在layoutConfig:{}裡面 ；