ExtJS的使用方法汇总5——布局

所谓布局，简单来说就是决定把什么东西放到什么位置上，对于管理软件来说，一般都是首部放标题，左边放菜单栏，空余的右下方用来显示具体的内容。本章将详细介绍EXT中布局的用法。

一、传统的布局方式

我们可以用Ext.Viewport类对整个页面进行整体布局，具体使用方法如下：

[c-sharp]  view plaincopy

1. var viewport=new Ext.Viewport({  
2.                layout:'border',  
3.                items:[{  
4.                    region:'north',  
5.                    height:40,  
6.                    html:'<h1>李志勇专栏</h1>'
7.                },{  
8.                    region:'west',  
9.                    width:100,  
10.                    html:'<p>菜单一</p><p>菜单二</p>'
12.                    region:'center',  
13.                    html:'主要内容'
14.                }]  
15.            });  

效果图如图1所示：

图1 传统的布局形式

二、最常用的边框布局BorderLayout

Ext.layout.BorderLayout布局把整个布局区域分成东、西、南、北、中5个部分，除了中间区域以外，其他的区域又都是可以省略的，因此我们可以利用它制作出更复杂、更灵活的布局。具体代码如下：

1. var viewport2=new Ext.Viewport({  
2.    layout:'border',  
3.    items:[{  
4.        region:'north',html:'north'
5.    },{  
6.        region:'south',html:'south'
8.        region:'east',html:'east'
10.        region:'west',html:'west'
12.        region:'center',html:'center'
13.    }]  
14. });  

效果图如图2所示。

图2 使用BorderLayout的布局

注意：center是绝对不能省略的，如果items中缺少了region:'center'就会报错，会造成程序中断。

2.1 设置子区域的大小

我们仅仅需要添加width和height参数，这样就可以指定每个子区域的大小了。但是，north和south两个区域只能指定高度值，宽度值由BorderLayout自动计算；east和west只能指定宽度值，高度值由BorderLayout自动计算；center区域的大小由其他4个部分决定。设置的代码如下所示：

4.                    region:'north',html:'north',height:120  
6.                    region:'south',html:'south'
8.                    region:'east',html:'east'
10.                    region:'west',html:'west',width:40  
12.                    region:'center',html:'center'

2.2 使用split并限制它的范围

使用split后，我们可以允许用户自动拖放以改变某一个区域的大小，实现的方式只要设置split:true参数即可实现，具体代码如下。

实现效果图如图3所示。

4.        region:'north',                      
5.        height:40,  
6.        html:'<h1>薛敬明专栏</h1>'
8.        region:'west',                      
9.        html:'<p>菜单一</p><p>菜单二</p>',  
10.        width:100,  
11.        split:true
13.        region:'center',  
14.        html:'主要内容'

图3 设置split:true后的效果图

2.3 子区域的展开和折叠

该功能可以让一个区域展开和折叠(相当于隐藏)，实现的方式只需要配置几个参数即可，具体代码如下，主要配置参数是collapsible:true，这个参数激活了某个区域的折叠功能，而且前面的title参数也是必须设置的。实现代码和效果图如下所示。

2.               layout:'border',  
3.               items:[{  
4.                   region:'north',  
5.                   height:40,  
6.                   html:'<h1>薛敬明专栏</h1>'
7.               },{  
8.                   region:'west',                      
9.                   html:'<p>菜单一</p><p>菜单二</p>',  
10.                   title:'west',  
11.                   width:100,  
12. //split:true
13.                   collapsible:true
15.                   region:'center',  
16.                   html:'主要内容'
17.               }]  
18.           });  

图4 带有折叠效果的布局

三、制作伸缩菜单的布局——Accordion

Accordion是EXT中默认布局的一部分，如果想用它，直接将区域加上layout:'accordion'即可，其他部分基本无需改动。我们利用ViewPort制作出只有west和center两个区域的BorderLayout，在west部分放上Accordion，实现方式如下面代码所示。

5.                    width:200,  
6.                    layout:'accordion',  
7.                    layoutConfig:{  
8.                        titleCollapse:true,  
9.                        animate:true,  
10.                        activeOnTop:false
11.                    },  
12.                    items:[{  
13.                        title:'第一栏',  
14.                        html:'第一栏'
15.                    },{  
16.                       title:'第二栏',  
17.                        html:'第二栏'
19.                       title:'第三栏',  
20.                        html:'第三栏'
21.                    }]  
24.                    split:true,  
25.                    border:true

效果图如图5所示。