ExtJS常用的布局都在Ext.layout下，这里几乎涵盖了所有的布局方式（但是值得注意的是通常我们不是直接通过new来创建这些类的对象然后往里面添加控件使用，而是作为控件一个配置属性使用让Ext自动创建对应的类），满足开发者需求。那么我们就其中常用的方式逐一介绍。
1.1布局的用途
所谓布局，简单来说就是在页面中的各个元素怎样摆放。对管理系统来说，有一种非常典型的布局方式，头部放置标题，左边放树形菜单，空余的部分用来显示内容
图4.1.1的布局方式比较典型。使用Ext制作这种布局布局简单，代码如示例4.1所示。
示例4.1
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
height: 50,
html: '<h1>上标题</h1>'
},{
region: 'west',
width: 100,
},{
region: 'center',
}]
});
});
在示例4.1中，使用Ext.Viewport对象对整个页面进行布局，构造这个对象主要有两个配置参数：layout和items。其中layout:‘border’，表示使用了BorderLayout的布局方式，这种布局称为边框布局，它将整个页面分割成东、西、南、北、中5个区域。使用items属性向布局中添加控件，在本例中使用region:‘north’、 region:‘west’、 region:‘center’把整个页面分为北、西、中间3个区域。虽然这个布局还略显粗糙，但也可以自动检测浏览器的大小变化和自动适应布局中每个部分的大小。
为了实现良好的页面布局，ExtJS提供了多种各式各样的布局，下面就将学习各种常见布局。
1.2最简单布局—FitLayout
有一个很简单的需求：客户需要在页面中显示一个表格，让它可以自适应页面大小的变化，页面变大的时候表格会变大，页面变小的时候表格也会变小。
要想实现这一需求就可以使用FitLayout实现，代码如示例4.2所示。
示例4.2
Ext.onReady(function(){
var store = new Ext.data.SimpleStore({
fields: ['id','name','desc'],
data: [
['1','name1','desc1'],
['2','name2','desc2'],
['3','name3','desc3'],
['4','name4','desc4'],
['5','name5','desc5']
]
});
var grid = new Ext.grid.GridPanel({
title: 'grid',
viewConfig: {forceFit: true},
store: store,
columns: [
{header:'id',dataIndex: 'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'desc'}
],
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: store
})
});
var viewport = new Ext.Viewport({
layout: 'fit',
items: [grid]
});
});
在示例4.2中，把Viewport中的layout设置为fit，这样Viewport就会使用FitLayout进行布局，再使用items属性把表格添加到Viewport中。就这样就能达到预期的效果，表格会填满整个页面，并且会根据页面大小的变化而变化。
FitLayout虽然简单，但是要注意的是，使用了FitLayout的容器里面只能放一个控件，即使放入了多个控件，也只有第一个控件会起作用。
1.3常用布局—BorderLayout
FitLayout布局每次只能显示一个控件，根本无法胜任复杂的布局需求，所以实际开发中用的最多的是BorderLayout布局。BorderLayout将整个布局区域分成东、西、南、北、中5个部分，除了中间部分外，其它部分都是可以省略的，因此我们可以利用它制作出更复杂、更灵活的布局。
下面使用BorderLayout实现一个完整的页面布局，代码如示例4.3所示。
示例4.3
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{region:'north',html:'north'},
{region:'south',html:'south'},
{region:'east',html:'east'},
{region:'west',html:'west'},
{region:'center',html:'center'}
]
});
});
示例4.3的运行效果如图4.1.3所示。
图4.1.3 BorderLayout布局
对BorderLayout来说，5个部分是预定义好的，根据上北、下南、左西、右东的方式进行布局。其中north和south分别位于页面的最上方和最下方，可以分别用来做系统的标题栏和状态栏；west和east分别位于页面的左边和右边，是为菜单和工具条准备的；center的大小是由其它4个部分设置好以后自动计算出来的，它是唯一不可省略的部分。
注意，center是绝对不可以省略的，如果items中缺少了region: ‘center’就会报错，会造成程序中断，页面上就什么也看不到了。
了解了BorderLayout的基本用法后，下面我们开始进一步学习它更深层次的功能。
1.3.1设置子区域大小
这里所谓的子区域是指north、south、west、east这4个区域，不包括中间的center，因为中间区域的大小是通过其它部分计算得来的。
north和south只能设置高度（height），west和east只能设置宽度（width）。下面通过一个示例看看怎样控制各个区域的大小，代码如示例4.4所示。
示例4.4
Ext.onReady(function(){
varviewport =newExt.Viewport({
layout:'border',
items:[
{region@H_332_502@'north'height:100},
@H_332_502@'south'@H_332_502@'east'80@H_332_502@'west'@H_332_502@'center'}
]
});
});
在上面代码中，我们使用height和width属性就可以设置每个区域的大小了。如前所述，north和south只设置了高度值，宽度值由布局容器自动计算；west和east只设置了宽度值，高度值由布局容器自动计算；center区域的大小是由其它4个部分决定的，所以不能设置宽度或高度。
1.3.2使用split并限制它的范围
使用了split就运行用户自行拖动以改变某一区域的大小。在上例基础上在north和west区域加入split:true，完整代码如示例4.5所示。
示例4.5
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: 'border',html:'north',height:100,split:true},html:'south',height:100},html:'east',width:80},html:'west',width:80,html:'center'}
]
});
});
示例4.5的运行效果如图4.1.5所示。从图中可以看到north、west和center区域相交的边界分割线变宽了，当鼠标移动到这些分割线的时候，就可以拖放改变相应区域的大小。当然，center区域的大小也会随之改变。
使用split:true可以任由用户改变子区域的大小，但是有时用户的操作会导致布局变得很乱，在出现问题时，用户还会认为是程序代码在某些方面不够严谨造成的，所以必须限制用户输入。
比如要限制左侧菜单区域的大小，不允许它太窄，否则无法完整显示菜单的内容，也不允许它太宽，否则会导致整个布局变形。这时我们需要使用参数minSize和maxSize，使用这两个参数就可以设置用户拖放的范围了，代码如示例4.6所示。
示例4.6
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: 'border',split:true,minSize:50,maxSize:150},html:'center'}
]
});
});
上面代码指定了west的初始宽度为80，如果用户拖动只能在50~150之间变化，不能超出这个范围，以此限制用户的操作。
1.3.3子区域的折叠和展开
通过配置参数collapsible:true可以让一个区域展开和折叠。
示例4.7
Ext.onReady(function() {
var viewport = new Ext.Viewport( {
layout : 'border',
items : [ {
region : 'north',
html : 'north',
height : 100,
title:'标题',
collapsible:true
},{
region : 'south',
html : 'south',
height : 100
},{
region : 'east',
html : 'east',
width : 80
},{
region : 'west',
html : 'west',
width : 80,
title:'菜单',{
region : 'center',
html : 'center'
} ]
});
});
在上面代码中，主要使用配置参数collapsible:true，这个参数激活了north和west区域的折叠功能。
至此，BorderLayout的主要功能都已经学习完了。只要掌握上面的内容，大家就可以实现丰富而灵活的布局了。下面我们将学习另外几种布局方式，它们与BorderLayout结合使用，从而实现功能更为复杂的布局样式。
1.4伸缩菜单布局—Accordion
Accordion用来制作伸缩菜单，如果想使用它，直接在区域中加上layout: ‘accordion’即可。
示例4.8
Ext(){
:[{
region
height50
width200502@'accordion':{
titleCollapse:true
activeOnTopfalse
{
title@H_332_502@'第一栏'502@'第一栏'
502@'第二栏'@H_332_502@'第二栏'
@H_332_502@'第三栏'@H_332_502@'第三栏'
}]
bordertrue
});
在上面代码中，我们利用BorderLayout把整个页面分为3部分。而在west部分，又使用了layout: ‘accordion’，把这一部分的布局方式设置为Accordion，然后使用items添加3个元素。
与Accordion布局有关的参数都写在layoutConfig里了，这些配置参数的作用如下所示：
(1)titleCollapse：默认为true，点击标题就可以折叠子面板；如果设置成false，就只能通过单击标题右边的图标折叠子面板。
(2)animate：展开和折叠时是否使用动画效果。
(3)activeOnTop：默认为false，执行展开和折叠后，子面板的顺序不会改变。如果设置为true，展开的子面板总是放在最上面。
1.5控制大小的布局—AnchorLayout
AnchorLayout提供了一种灵活的布局方式，既可以为items中每个组件指定与总体布局大小的差值，也可以设置一个比例使子组件可以根据整体自行计算大小。
示例4.9
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'anchor',
items:[{
title: 'panel 1',
html: 'panel 1',
anchor: '50% 50%'
},{
title: 'panel 2',
html: 'panel 2',
anchor: '80%'
}]
});
});
以上代码中，为panel1设置了一个anchor参数，参数值是一个字符串，该字符串的值是两个用空格分割的百分数，这两个百分数分别代表了容器中子控件所占的宽度和高度。panel2与之类似，只是anchor参数值只有一个百分数，这样配置的结果是宽度占整体的80%，而高度为自动。
1.6分列式布局—ColumnLayout
使用ColumnLayout可以对页面进行分列式布局。先看一个简单的示例，代码如示例4.10所示。
示例4.10
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'column',
items: [{
title: 'Column 1',
height:100,
columnWidth: .25
},{
title: 'Column 2',
height:100,
columnWidth: .4
},{
title: 'Column 3',
columnWidth: .35
}]
});
});
以上代码中，首先使用layout: ‘column’设置Viewport的布局为ColumnLayout，然后通过设置items里的每个子组件的columnWidth参数值，它是0~1之间的一个小数，表示每个组件在整体中所占的百分比。它们的总和应该等于1，否则页面会出现没有填满的情况。
有时我们希望某一列的宽度保持不变，当页面大小发生改变时，只让其它列发生改变。在ColumnLayout中可以单独为这一列设置确定宽度，其它列再使用columnWidth来分剩下的宽度，代码如示例4.11所示。
示例4.11
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'column',
width: 100
},
columnWidth: .5
},
columnWidth: .5
}]
});
});
以上代码中，Column1的宽度固定为100，Column2和Column3平分剩下的部分。以后无论页面如何变化，Column1的宽度都不会改变，Column2和Column3会根据页面的大小改变而改变。
1.7表格布局—TableLayout
TableLayout布局允许你非常容易地渲染内容到HTML表格中，使用它可以创建出复杂的表格布局，可以指定列数（columns），跨行（rowspan），跨列（colspan）。下面示例4.12是一个表格布局的示例。
示例4.12
Extvarpanel .Panel({
id @H_332_502@'main-panel':Ext.getBody(),
layout @H_332_502@'table'{
columns 3//设置表格布局默认列数是3
{
frame
height 200
:[ {
title @H_332_502@'Item 1'
502@'Item 2'
@H_332_502@'Item 3'
@H_332_502@'Item 4'4102
@H_332_502@'Item 5'
}]
});
在示例4.12中，使用layout: ‘table’设置了panel的布局方式为表格布局，然后使用layoutConfig设置了表格默认列数是3，而Item4中使用colspan设置了它独占两列。
1.8Box盒布局
Box盒布局又分为HBoxLayout（水平盒布局）和VBoxLayout（垂直盒布局）两种，使用它可以非常方便的实现一行或一列中排列多个组件的效果。下面通过示例4.13颜色HBoxLayout的使用。
示例4.13
Ext.onReady(function() {
var panel = new Ext.Panel( {
title : 'HBox',
width : 400,
height : 200,
renderTo : Ext.getBody(),
layout : {
type : 'hBox',
padding : '5',
align : 'stretch'
},
defaults : {
margins : '0 0 5 0'
},
items : [ {
xtype : 'button',
text : 'Button 1',
flex : 1
},{
xtype : 'button',
text : 'Button 2',
text : 'Button 3',
text : 'Button 4',
flex : 3
} ]
});
});
在以上代码中，与布局有关的配置放在layout属性中，使用type: ‘hBox’指定当前Panel使用HBoxLayout，可以为其中每个组件设置flex属性，flex属性值越大，对应的组件就会占据越大空间。HBoxLayout还支持使用align属性对布局中的组件设置统一的对齐方式，如上例中将align属性设置为stretch，此时Panel中组件的高度都自动拉伸以填充外部容器。示例4.13的运行效果如图4.1.11所示。
图4.1.11 HBoxLayout布局
VBoxLayout与HBoxLayout用法类似，这里就不再详述，大家可以自行学习。
1.9使用嵌套实现复杂布局
上面学习了多种布局，这些布局如果单独使用不能设计出复杂的界面，如果想实现复杂的布局就必须使用布局嵌套，下面是一个嵌套布局的示例。
示例4.14
Ext{
layout :[ .BoxComponent{
region 32{
tag @H_332_502@'div'502@'<p>顶部标题</p>'
}
}),255);">'底部状态栏'
minSize
collapsible 502@'South'502@'0 0 0 0'
502@'west-panel'@H_332_502@'West'175400@H_332_502@'0 0 0 5'{
type true
{
html false
@H_332_502@'<p>第二栏</p>'@H_332_502@'East Side'225400,
layout:'fit',
items{
html@H_332_502@'我会填满父容器'
},.TabPanel0@H_332_502@'欢迎使用本系统'@H_332_502@'欢迎页面'
autoScroll @H_332_502@'center2'@H_332_502@'Center Panel'})]
});
上面代码中，首先设置Viewport的布局为BorderLayout，然后对各个子组件再使用不同的布局方式
本章总结
ØExtJS提供了多种布局方式实现页面布局，ExtJS常用的布局都在Ext.layout下，常见的布局有：
n最简单布局—FitLayout
n常用布局—BorderLayout
n控制大小的布局—AnchorLayout
n分列式布局—ColumnLayout
n表格布局—TableLayout
nBox盒布局
Ø布局是可以嵌套的，使用布局嵌套能实现复杂的页面布局。
1：应用Ext布局
训练技能点
Ø使用 Ext 进行布局
需求说明
（1）使用Ext布局，将窗口分为上、下、左、右及中间5个部分。
（2）划分窗口布局的运行效果如图4.2.1所示。
图4.2.1 Ext窗口布局
（3）隐藏左右侧窗口，效果如图4.2.2所示。
图4.2.2 隐藏左右侧窗口布局
实现步骤
（1）使用Viewport作为布局容器，指定布局方式为border。
参考代码
<html>
<head>
<title>ExtJS</title>
<Meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="extjs/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var viewport=new Ext.Viewport({
layout:'border',
items:[{
title:'north',
region:'north',
html:'north',
split:true,
border:true,
collapsible:true,
height:50,
minSize50：应用Ext布局和Grid控件
训练技能点
Ø向BorderLayout布局中添加Grid控件
需求说明
在上一个任务布局的中间主体部分添加Grid表格
实现步骤
（1）实现任务1的布局。
（2）在中间区域加入Grid。
参考代码
在任务1布局的主体部分添加表格：
Ext(){
varsm.grid.CheckBoxSelectionModel();
varcm.ColumnModel([
.RowNumberer
{header@H_332_502@'编号'502@'empId'502@'姓名'@H_332_502@'userName'@H_332_502@'性别'@H_332_502@'sex'@H_332_502@'出生日期'@H_332_502@'birthday'.util.Format.dateRenderer('Y-m-d H:i:s')},255);">'地址'@H_332_502@'address'@H_332_502@'备注'@H_332_502@'remark'}
]);
vardata=[
['0001''故天乐'@H_332_502@'boy'@H_332_502@'1-2-2011'@H_332_502@'建设路'@H_332_502@'0001remark']'0002'@H_332_502@'周杰伦'@H_332_502@'人民路'@H_332_502@'0002remark']@H_332_502@'0003'@H_332_502@'林志玲'@H_332_502@'girl'@H_332_502@'大致路'@H_332_502@'0003remark']@H_332_502@'0004'@H_332_502@'蔡依林'@H_332_502@'湖边路'@H_332_502@'0004remark']
];
varstore.data.Store({
proxy:.MemoryProxy(data),
reader.ArrayReader({},[
{name)
});
store.loadvargrid .GridPanel({
store:store:cm:sm:{forceFit});
varviewport({
layout{
title
split
collapsible
maxSize120
width120});
3：应用复杂Form布局
训练技能点
ØForm布局
Ø多种布局综合应用
需求说明
实现如图4.2.4所示复杂Form布局。
图4.2.4 复杂Form布局
实现步骤
(1)使用FormPanel作为布局容器
(2)在容器中使用其它布局加入其它控件
参考代码如下所示：
Extvartop .FormPanel({
labelAlign@H_332_502@'top'
title@H_332_502@'用户注册'502@'padding:5px 5px 0'600{
layout@H_332_502@'column'{
columnWidth:.5@H_332_502@'form'{
xtype@H_332_502@'textfield'502@'账号'502@'first'502@'95%'
@H_332_502@'公司'@H_332_502@'company'502@'真实姓名'@H_332_502@'realName'502@'电子邮件'@H_332_502@'email'502@'htmleditor'502@'bio'@H_332_502@'工作简历'502@'98%'
}]{
text@H_332_502@'提交'
502@'取消'
});
top.render(document.body);
});
4：实现点击树形菜单后向主区域添加组件
训练技能点
ØTree控件事件处理
Ø向TabPanel容器中添加组件
需求说明
在常见的管理系统布局中，当点击左边树形菜单后，就会有不同的内容显示到右边主区域中。
图4.2.5 系统首页
图4.2.6 点击操作用户后界面
实现步骤
(1)首先使用BorderLayout对页面进行整体布局
(2)处理树控件事件
(3)根据点击的树节点，向中间区域加入对应组件
参考代码如下所示：
Ext({
id@H_332_502@'usergrid'vartree .tree.TreePanel{
collapsible @H_332_502@'管理菜单'false.TreeLoader.AsyncTreeNode{
text @H_332_502@'系统管理'
icon @H_332_502@'img/13.png'502@'用户管理'@H_332_502@'img/users.png'{
id@H_332_502@'userinfo'502@'img/user.png'502@'userright'@H_332_502@'用户权限'@H_332_502@'img/usericon.png'@H_332_502@'客户管理'@H_332_502@'img/60.png'@H_332_502@'客户维护'@H_332_502@'img/61.png'@H_332_502@'客户关系'@H_332_502@'img/62.png':{
click(n){
if.leafvarnid =n.id(nid ==varusergrid =tabs.get(!usergrid){
tabs.add(grid);
}
tabs.setActiveTab}elsevaruserrightPanel @H_332_502@'userrightPanel'(!userrightPanel){
userrightPanel @H_332_502@'用户权限'
});
tabs(userrightPanel});
vartabs ({
region@H_332_502@'首页'502@"欢迎使用本系统！以下是你需要处理的任务！<br/>你有<a href=#>30</a>封新邮件<br/>"
();
180:tree
});
一、选择题
1.使用了FitLayout的容器里面能添加（ ）个控件。
A.1个
B.2个
C.3个
D.不限制
2.BorderLayout使用（ ）属性设置子控件在容器中的方位。
A.items
B.title
C.region
D.border
3.BorderLayout必须包含（ ）区域。
A.north
B.west
C.east
D.center
4.AnchorLayout中使用（ ）属性设置子控件所占的大小。
A.width
B.height
C.anchor
D.border
5.ColumnLayout中使用（ ）属性设置子控件所占的宽度。
A.columnWidth
B.width
C.itemWidth
D.autoWidth
原文链接：https://www.f2er.com/ajax/161289.html