三、Accordion（導航布局）
 1Ext.onReady(function(){
 2new Ext.Viewport({
 3    layout:'border',
 4    items:[{
 5        region:'west',
 6        layout:'accordion',
 7        width:100,
 8        layoutConfig: {
 9            titleCollapse:true,
10            animate:true,
11            activeOnTop:false
12        },
13        items:[{
14            title:'工具欄',
15            html:'工具欄'
16        },{
17            title:'好友',
18            html:'好友'
19        },{
20            title:'陌生人',
21            html:'陌生人'
22        }]
23        },
24        {region:'center',html:'center'}
25    ]
26    })
27})
28

 

設置layout:'accordion',在添加若干items就可以使用了。但記得要給每一個字元素加上title屬性。accordion默認沒有提供標題設置。

布局的配置參數都寫到layoutConfig中了

1、titleCollapse:默認為true，表示單擊標題就可以收縮子面板，如果設置為false，則必須單擊標題右邊的圖標來收縮面板。

2、animate：是否使用動畫效果。

3、activeOnTop:默認是false，展開和收縮后子面板的位置不變。如果設置為true，就會隨著展開和收縮變換位置。展開的面板總是在最頂層。



四、AnchorLayout（錨點布局）

anchor有三種配置方式

1、使用百分比配置。

anchor參數是一個字符串，panel1包含了兩個用空格分開的百分數。這兩個百分數代表了所占的高度和寬度。panel2只有一個百分比參數，表示寬度為80%，高度為auto。

1Ext.onReady(function(){
2new Ext.Viewport({
3    layout:'anchor',
4    items:[
5        {title:'panel 1',html:'panel 1',anchor:'50% 50%'},
6        {title:'panel 2',html:'panel 2',anchor:'70%'}]
7    })
8})
9



 

2、直接指定與右側和底部的邊距。

1Ext.onReady(function(){
2new Ext.Viewport({
3    layout:'anchor',
4    items:[
5        {title:'panel 1',html:'panel 1',anchor:'-50 -150'},
6        {title:'panel 2',html:'panel 2',anchor:'-100'}]
7    })
8})
9
 panel1中有兩個用空格分開的整數，表示與右側和底部的相對距離。在anchor中使用負數表示組件的實際大小是在整體大小上減去對應的anchor的值來得到。panel2表示只計算右側的邊距。高度自動賦予auto。

 

3、在anchor中同時使用百分比和邊距的配置方式。

1Ext.onReady(function(){
2new Ext.Viewport({
3    layout:'anchor',
4    items:[
5        {title:'panel 1',html:'panel 1',anchor:'-50 50%'},
6        {title:'panel 2',html:'panel 2',anchor:'-100'}]
7    })
8})
9
panel表示寬度距右側50個像素，高度占整體的50%

這種方式適用于對寬度不變，高度需要自由調整的布局進行精確的控制。


 

五、AbsoluteLayout（絕對位置布局）

1Ext.onReady(function(){
2new Ext.Viewport({
3    layout:'absolute',
4    items:[
5        {title:'panel 1',html:'panel 1',x:12,y:10,width:100,height:200},
6        {title:'panel 2',html:'panel 2',x:150}]
7    })
8})
9


 

通過x,y設置位置。


 

六、FormLayout(表單布局)

FromLayout是AnchorLayout的子類，所以可以在他里面使用anchor來設置寬和高的比例。

但是Fromlayout主要用于表單的布局，FromPanel使用它作為默認的布局方式。正因為使用了FormLayout布局，fieldLabel，boxLabel才能顯示處理。

1、FormLayout提供的用于控制表單顯示的參數。

hideLabels:是否隱藏field的標簽

itemCls：表單顯示的樣式。

labelAlign：表單的對其方式（左、中、右）

labelPad：標簽空白的像素值

labelWidth：標簽的寬度。

2、FormLayout為ext.form.Field提供的配置參數。

clearCls：清除渲染div的樣式

fieldLabel：field對應的標簽內容

hideLabel：是否隱藏標簽

itemCls：field的樣式。

labelSeparator：標簽和field之間的分割，默認“：”

labelStyle：標簽的css

 1Ext.onReady(function(){
 2new Ext.Viewport({
 3    layout:'fit',
 4    items:[{
 5    xtype:'form',
 6    labelAlign:'right',
 7    frame:true,
 8    title:'信息',
 9    defaultType:'textfield',
10    items:[
11        {fieldLabel:'名稱',name:'name',anchor:"90%"},
12        {fieldLabel:'性別',name:'sex',xtype:'datefield'},
13        {fieldLabel:'備注',name:'sex',xtype:'textarea',anchor:'90% -100'}
14        ]
15    }]
16})
17})
18




 

七、ColumnLayout(列布局器)

1Ext.onReady(function(){
2new Ext.Viewport({
3    layout:'column',
4    items:[
5        {title:'panel 1',columnWidth:0.7},
6        {title:'panel 2',columnWidth:0.3}]
7    })
8})
9


 

列布局器，注意columnWidth屬性，它是0～1之間的一個小數。他表示每個字組件在整體中占的百分比。他們的總和應該是1.否則頁面會有沒填滿的情況。

如果為columnWidth分配了錯誤的值，比如大小超過1的值。不會報錯，但是頁面布局被打亂了。

 

如果我們想某一列的寬度固定，當頁面調整時，只讓其他列發生變化。我們在columnWidth中可以單獨為這一列賦予寬度，其他的列在使用columnWidth進行平分。

 1Ext.onReady(function(){
 2new Ext.Viewport({
 3    layout:'column',
 4    items:[
 5        {title:'panel 1',width:90},
 6        {title:'panel 2',columnWidth:0.3},
 7        {title:'panel 2',columnWidth:0.7}]
 8    })
 9})
10