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

1titleCollapse:默认为true,表示单击标题就可以收缩子面板,如果设置为false,则必须单击标题右边的图标来收缩面板。

2animate:是否使用动画效果。

3activeOnTop:默认是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(表单布局)

FromLayoutAnchorLayout的子类,所以可以在他里面使用anchor来设置宽和高的比例。

但是Fromlayout主要用于表单的布局,FromPanel使用它作为默认的布局方式。正因为使用了FormLayout布局,fieldLabelboxLabel才能显示处理。

1FormLayout提供的用于控制表单显示的参数。

hideLabels:是否隐藏field的标签

itemCls:表单显示的样式。

labelAlign:表单的对其方式(左、中、右)

labelPad:标签空白的像素值

labelWidth:标签的宽度。

2FormLayoutext.form.Field提供的配置参数。

clearCls:清除渲染div的样式

fieldLabelfield对应的标签内容

hideLabel:是否隐藏标签

itemClsfield的样式。

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属性,它是01之间的一个小数。他表示每个字组件在整体中占的百分比。他们的总和应该是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