三、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