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

一、传统的布局方式

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

  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>'  
  11.                 },{  
  12.                     region:'center',  
  13.                     html:'主要内容'  
  14.                 }]  
  15.             });  

 

效果图如图1所示:

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'  
  7.     },{  
  8.         region:'east',html:'east'  
  9.     },{  
  10.         region:'west',html:'west'  
  11.     },{  
  12.         region:'center',html:'center'  
  13.     }]  
  14. });  

 

效果图如图2所示。 

2

图2 使用BorderLayout的布局

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

2.1 设置子区域的大小

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

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

 

2.2 使用split并限制它的范围

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

实现效果图如图3所示。

  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.         html:'<p>菜单一</p><p>菜单二</p>',  
  10.         width:100,  
  11.         split:true  
  12.     },{  
  13.         region:'center',  
  14.         html:'主要内容'  
  15.     }]  
  16. });  

 

3

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

2.3 子区域的展开和折叠

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

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

 

4

图4 带有折叠效果的布局

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

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

  1. var viewport=new Ext.Viewport({  
  2.                 layout:'border',  
  3.                 items:[{  
  4.                     region:'west',  
  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:'第二栏'   
  18.                     },{  
  19.                        title:'第三栏',  
  20.                         html:'第三栏'   
  21.                     }]  
  22.                 },{  
  23.                     region:'center',  
  24.                     split:true,  
  25.                     border:true  
  26.                 }]  
  27.             });  

 

效果图如图5所示。

5

图5 使用了Accordion的示例

设置了layout:'accordion'后,再使用items添加3个元素,记得每个子元素里都要加上title参数,accordion没有提供默认的标题,不设置标题是一定会出错的。与布局有关的配置项都写到layoutConfig里。