Extjs布局类(一)

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

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

图1、Container和他的子类继承图

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

图2、布局类型继承图。

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

常用的布局方式：

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

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

3、FromLayout，表单专用布局。

4、ColumnLayout,分列布局。

5、AbsoluteLayout，绝对位置布局。

6、Accordion，折叠布局。

7、AnchorLayout，锚点布局。

8、Cardlayout,卡片布局。

9、ContainerLayout，容器布局

10、TableLayout，表格布局。

一、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
 7items:[
 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)设置子区域的大小

子区域是指north、south、west、east。center不能设置大小，它是根据其他四块设置好后，自动计算出来的。

north和south只能设置height属性(高度)。west和east只能设置width属性(宽度)。

 

 1Ext.onReady(function(){
 2
 3new Ext.Viewport({
 4
 5layout:'border',
 6
 7items:[
 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
 7items:[
 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属性后，west和center的边界线变宽了。通过拖动这个边界线可以调整west和center的宽度。

对north和south设置split属性，只能上下拖动。对west和east设置split属性，只能左右拖动。

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

 

 1Ext.onReady(function(){
 2
 3new Ext.Viewport({
 4
 5layout:'border',
 6
 7items:[
 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

 

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

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

 

 1Ext.onReady(function(){
 2
 3new Ext.Viewport({
 4
 5layout:'border',
 6
 7items:[
 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那折叠按钮是不会出现的。