Extjs布局类(一)

Ext中,所有的布局类都是从Ext.Container开始的,Container的父类是BoxComponent

Ext.BoxComponent是一个盒子组件,可以定义高度、宽度、位置等属性。作为子类的Container继承了父类的功能,更重要的是,他可以通过layoutitem属性为内部的子控件进行布局

1Container和他的子类继承图

所以,只要是Container的子类,我们都可以通过Layout对内部的item进行布局。

2、布局类型继承图。

Ext.Container类似,所有的布局类也有一个共同的超类Ext.layout.ContainerLayout。凡是继承该类的子类都可以对Container和他的子类进行布局定义,这两棵继承树结合在一起就构成了Ext完整的布局系统。

常用的布局方式:

1BorderLayout,边界布局,将页面分成东西南北中,五个部分。使用region来指定具体的存放位置。

2FitLayout,自动填充整个空间。

3FromLayout,表单专用布局。

4ColumnLayout,分列布局。

5AbsoluteLayout,绝对位置布局。

6Accordion,折叠布局。

7AnchorLayout,锚点布局。

8Cardlayout,卡片布局。

9ContainerLayout,容器布局

10TableLayout,表格布局。

一、FitLayout(全填充布局)

 

 1Ext.onReady(function(){
 2

 3    new Ext.Viewport(
{
 4

 5    layout:'fit'
,
 6

 7    items:[
{
 8

 9     region: 'center'
,
10

11     xtype:'panel'
,
12

13     frame:true
,
14

15     html:'这是一个FitLayout'

16
17    }
]
18

19}
)
20

21}
)
22

 

panel填充了整个页面,并且它的自身会随着页面大小而变化。

注意点

(1)使用了FitLayout布局的组件,items只能放一个子组件。如果放置了多个,那也只有第一个显示。

修改一下代码

 1
 2
 3Ext.onReady(function()
{
 4

 5new Ext.Viewport(
{
 6

 7layout:'fit'
,
 8

 9items:[
{
10

11         region:'north'
,
12

13         html:'Head'

14
15}
,{
16

17region: 'center'
,
18

19xtype:'panel'
,
20

21frame:true
,
22

23html:'这是一个FitLayout'

24
25}
]
26

27}
)
28

29}
)
30

可以看到,在panel前加了一个,所以panel失效了。最后看的只是第一个页面,显示head

2)在item中使用Grid千万不要使用autoHeight:true参数。这个参数会使得FitLayout失效。他会重新计算Grid的高度。最后得到的Grid无法填充整个页面。




二、
BorderLayout(边框布局)

 

 1Ext.onReady(function(){
 2

 3new Ext.Viewport(
{
 4

 5layout:'border'
,
 6

 7
items:[
 8

 9{region:'north',html:'north'}
,
10

11{region:'south',html:'south'}
,
12

13{region:'east',html:'east'}
,
14

15{region:'west',html:'west'}
,
16

17{region:'center',html:'center'}

18
19
]
20

21}
)
22

23}
)
24

 

注意点

(1)center的大小是根据其他四个部分设置好后自动计算出来的。它是唯一一个不能省略的部分,如果items里缺少region:'center',就会报错。

附加功能

(1)设置子区域的大小

子区域是指northsouthwesteastcenter不能设置大小,它是根据其他四块设置好后,自动计算出来的。

northsouth只能设置height属性(高度)westeast只能设置width属性(宽度)

 

 1Ext.onReady(function(){
 2

 3new Ext.Viewport(
{
 4

 5layout:'border'
,
 6

 7
items:[
 8

 9{region:'north',html:'north',height:80}
,
10

11{region:'south',html:'south',height:80}
,
12

13{region:'east',html:'east',width:80}
,
14

15{region:'west',html:'west',width:80}
,
16

17{region:'center',html:'center'}

18
19
]
20

21}
)
22

23}
)
24

 

(2)使用split,并限制它拖动的范围

 

 1Ext.onReady(function(){
 2

 3new Ext.Viewport(
{
 4

 5layout:'border'
,
 6

 7
items:[
 8

 9{region:'north',html:'north',height:80}
,
10

11{region:'west',html:'west',width:80,split:true}
,
12

13{region:'center',html:'center'}

14
15
]
16

17}
)
18

19}
)
20

 

west设置了split:true属性后,westcenter的边界线变宽了。通过拖动这个边界线可以调整westcenter的宽度。

northsouth设置split属性,只能上下拖动。对westeast设置split属性,只能左右拖动。

如果不对拖动范围限制的话,让用户任意拖动有可能造成布局变形,所以我们应该设置一个可以拖动的区域。

 

 1Ext.onReady(function(){
 2

 3new Ext.Viewport(
{
 4

 5layout:'border'
,
 6

 7
items:[
 8

 9{region:'north',html:'north',height:80}
,
10

11{region:'west',html:'west',width:80,split:true,minSize:70,maxSize:120}
,
12

13{region:'center',html:'center'}

14
15
]
16

17}
)
18

19}
)
20

 

通过设置minSizemaxSize来控制拖动的最小、最大长度。

(3)子区域的收缩和展开。

 

 1Ext.onReady(function(){
 2

 3new Ext.Viewport(
{
 4

 5layout:'border'
,
 6

 7
items:[
 8

 9{region:'north',html:'north',height:80,collapsible:true}
,
10

11{region:'west',html:'west',width:80,title:'west',collapsible:true}
,
12

13{region:'center',html:'center'}

14
15
]
16

17}
)
18

19}
)
20

 

折叠前

折叠后

要实现折叠功能,主要是配置collapsible属性。这个属性激活了west区域的折叠功能,不要要注意的是title属性是必须要设置的,因为折叠按钮是出现在title上的。如果没有title那折叠按钮是不会出现的。