ExtJS常用的布局都在@H_502_2@Ext.layout下，这里几乎涵盖了所有的布局方式（但是值得注意的是通常我们不是直接通过@H_502_2@new@H_502_2@来创建这些类的对象然后往里面添加控件使用，而是作为控件一个配置属性使用让@H_502_2@Ext@H_502_2@自动创建对应的类），满足开发者需求。那么我们就其中常用的方式逐一介绍。@H_502_2@

核心技能部分

1.1布局的用途

所谓布局，简单来说就是在页面中的各个元素怎样摆放。对管理系统来说，有一种非常典型的布局方式，头部放置标题，左边放树形菜单，空余的部分用来显示内容@H_502_2@

图@H_502_2@4.1.1的布局方式比较典型。使用@H_502_2@Ext@H_502_2@制作这种布局布局简单，代码如示例@H_502_2@4.1@H_502_2@所示。@H_502_2@

示例@H_502_2@4.1

Ext.onReady(function() {

var viewport = new Ext.Viewport({

layout: 'border',

items: [{

region: 'north',

height: 50,

html: '<h1>上标题@H_502_2@</h1>'@H_502_2@

},{

region: 'west',

width: 100,

html: '<p>菜单@H_502_2@1</p><p>@H_502_2@菜单@H_502_2@2</p>'@H_502_2@

},{

region: 'center',

html: '显示内容主区域@H_502_2@'@H_502_2@

}]

});

});

在示例@H_502_2@4.1中，使用@H_502_2@Ext.Viewport@H_502_2@对象对整个页面进行布局，构造这个对象主要有两个配置参数：@H_502_2@layout@H_502_2@和@H_502_2@items@H_502_2@。其中@H_502_2@layout:@H_502_2@‘border’，表示使用了@H_502_2@BorderLayout的布局方式，这种布局称为边框布局，它将整个页面分割成东、西、南、北、中@H_502_2@5@H_502_2@个区域。使用@H_502_2@items@H_502_2@属性向布局中添加控件，在本例中使用@H_502_2@region:@H_502_2@‘north’、@H_502_2@ region:‘west’、@H_502_2@ region:‘center’把整个页面分为北、西、中间@H_502_2@3个区域。虽然这个布局还略显粗糙，但也可以自动检测浏览器的大小变化和自动适应布局中每个部分的大小。@H_502_2@

为了实现良好的页面布局，@H_502_2@ExtJS提供了多种各式各样的布局，下面就将学习各种常见布局。@H_502_2@

1.2最简单布局—FitLayout

有一个很简单的需求：客户需要在页面中显示一个表格，让它可以自适应页面大小的变化，页面变大的时候表格会变大，页面变小的时候表格也会变小。

要想实现这一需求就可以使用@H_502_2@FitLayout实现，代码如示例@H_502_2@4.2@H_502_2@所示。@H_502_2@

示例@H_502_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:'名称@H_502_2@',dataIndex:'name'},@H_502_2@

{header:'描述@H_502_2@',dataIndex:'desc'}@H_502_2@

],

bbar: new Ext.PagingToolbar({

pageSize: 15,

store: store

})

});

var viewport = new Ext.Viewport({

layout: 'fit',

items: [grid]

});

});

在示例@H_502_2@4.2中，把@H_502_2@Viewport@H_502_2@中的@H_502_2@layout@H_502_2@设置为@H_502_2@fit@H_502_2@，这样@H_502_2@Viewport@H_502_2@就会使用@H_502_2@FitLayout@H_502_2@进行布局，再使用@H_502_2@items@H_502_2@属性把表格添加到@H_502_2@Viewport@H_502_2@中。就这样就能达到预期的效果，表格会填满整个页面，并且会根据页面大小的变化而变化。@H_502_2@

FitLayout虽然简单，但是要注意的是，使用了@H_502_2@FitLayout@H_502_2@的容器里面只能放一个控件，即使放入了多个控件，也只有第一个控件会起作用。@H_502_2@

1.3常用布局—BorderLayout

FitLayout布局每次只能显示一个控件，根本无法胜任复杂的布局需求，所以实际开发中用的最多的是@H_502_2@BorderLayout@H_502_2@布局。@H_502_2@BorderLayout@H_502_2@将整个布局区域分成东、西、南、北、中@H_502_2@5@H_502_2@个部分，除了中间部分外，其它部分都是可以省略的，因此我们可以利用它制作出更复杂、更灵活的布局。@H_502_2@

下面使用@H_502_2@BorderLayout实现一个完整的页面布局，代码如示例@H_502_2@4.3@H_502_2@所示。@H_502_2@

示例@H_502_2@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'}

]

});

});

示例@H_502_2@4.3的运行效果如图@H_502_2@4.1.3@H_502_2@所示。@H_502_2@

图@H_502_2@4.1.3 BorderLayout布局@H_502_2@

对@H_502_2@BorderLayout来说，@H_502_2@5@H_502_2@个部分是预定义好的，根据上北、下南、左西、右东的方式进行布局。其中@H_502_2@north@H_502_2@和@H_502_2@south@H_502_2@分别位于页面的最上方和最下方，可以分别用来做系统的标题栏和状态栏；@H_502_2@west@H_502_2@和@H_502_2@east@H_502_2@分别位于页面的左边和右边，是为菜单和工具条准备的；@H_502_2@center@H_502_2@的大小是由其它@H_502_2@4@H_502_2@个部分设置好以后自动计算出来的，它是唯一不可省略的部分。@H_502_2@

注意，@H_502_2@center是绝对不可以省略的，如果@H_502_2@items@H_502_2@中缺少了@H_502_2@region: @H_502_2@‘center’就会报错，会造成程序中断，页面上就什么也看不到了。

了解了@H_502_2@BorderLayout的基本用法后，下面我们开始进一步学习它更深层次的功能。@H_502_2@

1.3.1设置子区域大小

这里所谓的子区域是指@H_502_2@north、@H_502_2@south@H_502_2@、@H_502_2@west@H_502_2@、@H_502_2@east@H_502_2@这@H_502_2@4@H_502_2@个区域，不包括中间的@H_502_2@center@H_502_2@，因为中间区域的大小是通过其它部分计算得来的。@H_502_2@

north和@H_502_2@south@H_502_2@只能设置高度（@H_502_2@height@H_502_2@），@H_502_2@west@H_502_2@和@H_502_2@east@H_502_2@只能设置宽度（@H_502_2@width@H_502_2@）。下面通过一个示例看看怎样控制各个区域的大小，代码如示例@H_502_2@4.4@H_502_2@所示。@H_502_2@

示例@H_502_2@4.4

Ext.@H_502_2@onReady(@H_502_2@function@H_502_2@(){@H_502_2@

var@H_502_2@viewport =@H_502_2@new@H_502_2@Ext.@H_502_2@Viewport({@H_502_2@

layout:@H_502_2@'border'@H_502_2@,@H_502_2@

items:@H_502_2@[

{@H_502_2@region@H_870_502@'north'@H_502_2@502_2@html502_2@height:@H_502_2@100@H_502_2@},@H_502_2@

@H_870_502@'south'@H_502_2@@H_870_502@'east'@H_502_2@502_2@width80@H_502_2@@H_870_502@'west'@H_502_2@@H_870_502@'center'@H_502_2@}@H_502_2@

]

});@H_502_2@

});@H_502_2@

在上面代码中，我们使用@H_502_2@height和@H_502_2@width@H_502_2@属性就可以设置每个区域的大小了。如前所述，@H_502_2@north@H_502_2@和@H_502_2@south@H_502_2@只设置了高度值，宽度值由布局容器自动计算；@H_502_2@west@H_502_2@和@H_502_2@east@H_502_2@只设置了宽度值，高度值由布局容器自动计算；@H_502_2@center@H_502_2@区域的大小是由其它@H_502_2@4@H_502_2@个部分决定的，所以不能设置宽度或高度。@H_502_2@

1.3.2使用@H_502_2@split并限制它的范围@H_502_2@

使用了@H_502_2@split就运行用户自行拖动以改变某一区域的大小。在上例基础上在@H_502_2@north@H_502_2@和@H_502_2@west@H_502_2@区域加入@H_502_2@split:true@H_502_2@，完整代码如示例@H_502_2@4.5@H_502_2@所示。@H_502_2@

示例@H_502_2@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'}

]

});

});

示例@H_502_2@4.5的运行效果如图@H_502_2@4.1.5@H_502_2@所示。从图中可以看到@H_502_2@north@H_502_2@、@H_502_2@west@H_502_2@和@H_502_2@center@H_502_2@区域相交的边界分割线变宽了，当鼠标移动到这些分割线的时候，就可以拖放改变相应区域的大小。当然，@H_502_2@center@H_502_2@区域的大小也会随之改变。@H_502_2@

使用@H_502_2@split:true可以任由用户改变子区域的大小，但是有时用户的操作会导致布局变得很乱，在出现问题时，用户还会认为是程序代码在某些方面不够严谨造成的，所以必须限制用户输入。@H_502_2@

比如要限制左侧菜单区域的大小，不允许它太窄，否则无法完整显示菜单的内容，也不允许它太宽，否则会导致整个布局变形。这时我们需要使用参数@H_502_2@minSize和@H_502_2@maxSize@H_502_2@，使用这两个参数就可以设置用户拖放的范围了，代码如示例@H_502_2@4.6@H_502_2@所示。@H_502_2@

示例@H_502_2@4.6

Ext.onReady(function(){

var viewport = new Ext.Viewport({

layout: 'border',split:true,minSize:50,maxSize:150},html:'center'}

]

});

});

上面代码指定了@H_502_2@west的初始宽度为@H_502_2@80@H_502_2@，如果用户拖动只能在@H_502_2@50~150@H_502_2@之间变化，不能超出这个范围，以此限制用户的操作。@H_502_2@

1.3.3子区域的折叠和展开

通过配置参数@H_502_2@collapsible:true可以让一个区域展开和折叠。@H_502_2@

示例@H_502_2@4.7

Ext.onReady(function() {

var viewport = new Ext.Viewport( {

layout : 'border',

items : [ {

region : 'north',

html : 'north',

height : 100,

title:'标题@H_502_2@',@H_502_2@

collapsible:true

},{

region : 'south',

html : 'south',

height : 100

},{

region : 'east',

html : 'east',

width : 80

},{

region : 'west',

html : 'west',

width : 80,

title:'菜单@H_502_2@',{

region : 'center',

html : 'center'

} ]

});

});

在上面代码中，主要使用配置参数@H_502_2@collapsible:true，这个参数激活了@H_502_2@north@H_502_2@和@H_502_2@west@H_502_2@区域的折叠功能@H_502_2@。@H_502_2@

至此，@H_502_2@BorderLayout的主要功能都已经学习完了。只要掌握上面的内容，大家就可以实现丰富而灵活的布局了。下面我们将学习另外几种布局方式，它们与@H_502_2@BorderLayout@H_502_2@结合使用，从而实现功能更为复杂的布局样式。@H_502_2@

1.4伸缩菜单布局—Accordion

Accordion用来制作伸缩菜单，如果想使用它，直接在区域中加上@H_502_2@layout: @H_502_2@‘accordion’即可。

示例@H_502_2@4.8

Ext()@H_502_2@{@H_502_2@

:@H_502_2@[{@H_502_2@

region502_2@

title502_2@

height50@H_502_2@

502_2@

region502_2@

width200@H_502_2@502_2@

layout@H_870_502@'accordion'@H_502_2@502_2@

layoutConfig:@H_502_2@{@H_502_2@

titleCollapse:@H_502_2@true@H_502_2@502_2@

animate502_2@

activeOnTopfalse@H_502_2@

{@H_502_2@

title@H_870_502@'第一栏@H_502_2@'@H_502_2@@H_502_2@502_2@

html@H_870_502@'第一栏@H_502_2@'@H_502_2@@H_502_2@

502_2@

title@H_870_502@'第二栏@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'第二栏@H_502_2@'@H_502_2@@H_502_2@

@H_870_502@'第三栏@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'第三栏@H_502_2@'@H_502_2@@H_502_2@

}@H_502_2@]

502_2@

split502_2@

bordertrue@H_502_2@

});@H_502_2@

在上面代码中，我们利用@H_502_2@BorderLayout把整个页面分为@H_502_2@3@H_502_2@部分。而在@H_502_2@west@H_502_2@部分，又使用了@H_502_2@layout: @H_502_2@‘accordion’，把这一部分的布局方式设置为@H_502_2@Accordion，然后使用@H_502_2@items@H_502_2@添加@H_502_2@3@H_502_2@个元素。@H_502_2@

与@H_502_2@Accordion布局有关的参数都写在@H_502_2@layoutConfig@H_502_2@里了，这些配置参数的作用如下所示：@H_502_2@

(1)titleCollapse：默认为@H_502_2@true@H_502_2@，点击标题就可以折叠子面板；如果设置成@H_502_2@false@H_502_2@，就只能通过单击标题右边的图标折叠子面板。@H_502_2@

(2)animate：展开和折叠时是否使用动画效果。@H_502_2@

(3)activeOnTop：默认为@H_502_2@false@H_502_2@，执行展开和折叠后，子面板的顺序不会改变。如果设置为@H_502_2@true@H_502_2@，展开的子面板总是放在最上面。@H_502_2@

1.5控制大小的布局—AnchorLayout

AnchorLayout提供了一种灵活的布局方式，既可以为@H_502_2@items@H_502_2@中每个组件指定与总体布局大小的差值，也可以设置一个比例使子组件可以根据整体自行计算大小。@H_502_2@

示例@H_502_2@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%'

}]

});

});

以上代码中，为@H_502_2@panel1设置了一个@H_502_2@anchor@H_502_2@参数，参数值是一个字符串，该字符串的值是两个用空格分割的百分数，这两个百分数分别代表了容器中子控件所占的宽度和高度。@H_502_2@panel2@H_502_2@与之类似，只是@H_502_2@anchor@H_502_2@参数值只有一个百分数，这样配置的结果是宽度占整体的@H_502_2@80%@H_502_2@，而高度为自动。@H_502_2@

1.6分列式布局—ColumnLayout

使用@H_502_2@ColumnLayout可以对页面进行分列式布局。先看一个简单的示例，代码如示例@H_502_2@4.10@H_502_2@所示。@H_502_2@

示例@H_502_2@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

}]

});

});

以上代码中，首先使用@H_502_2@layout: ‘column’设置@H_502_2@Viewport的布局为@H_502_2@ColumnLayout@H_502_2@，然后通过设置@H_502_2@items@H_502_2@里的每个子组件的@H_502_2@columnWidth@H_502_2@参数值，它是@H_502_2@0~1@H_502_2@之间的一个小数，表示每个组件在整体中所占的百分比。它们的总和应该等于@H_502_2@1@H_502_2@，否则页面会出现没有填满的情况。@H_502_2@

有时我们希望某一列的宽度保持不变，当页面大小发生改变时，只让其它列发生改变。在@H_502_2@ColumnLayout中可以单独为这一列设置确定宽度，其它列再使用@H_502_2@columnWidth@H_502_2@来分剩下的宽度，代码如示例@H_502_2@4.11@H_502_2@所示。@H_502_2@

示例@H_502_2@4.11

Ext.onReady(function() {

var viewport = new Ext.Viewport({

layout:'column',

width: 100

},

columnWidth: .5

},

columnWidth: .5

}]

});

});

以上代码中，@H_502_2@Column1的宽度固定为@H_502_2@100@H_502_2@，@H_502_2@Column2@H_502_2@和@H_502_2@Column3@H_502_2@平分剩下的部分。以后无论页面如何变化，@H_502_2@Column1@H_502_2@的宽度都不会改变，@H_502_2@Column2@H_502_2@和@H_502_2@Column3@H_502_2@会根据页面的大小改变而改变。@H_502_2@

1.7表格布局—TableLayout

TableLayout布局允许你非常容易地渲染内容到@H_502_2@HTML@H_502_2@表格中，使用它可以创建出复杂的表格布局，可以指定列数（@H_502_2@columns@H_502_2@），跨行（@H_502_2@rowspan@H_502_2@），跨列（@H_502_2@colspan@H_502_2@）。下面示例@H_502_2@4.12@H_502_2@是一个表格布局的示例。@H_502_2@

示例@H_502_2@4.12

Extvar@H_502_2@panel .@H_502_2@Panel(@H_502_2@{@H_502_2@

id @H_870_502@'main-panel'@H_502_2@502_2@

renderTo :@H_502_2@Ext.@H_502_2@getBody(),@H_502_2@

layout @H_870_502@'table'@H_502_2@502_2@

layoutConfig {@H_502_2@

columns 3@H_502_2@//设置表格布局默认列数是@H_502_2@3@H_502_2@@H_502_2@

502_2@

defaults {@H_502_2@

frame 502_2@

width 502_2@

height 200@H_502_2@

502_2@

items :@H_502_2@[ {@H_502_2@

title @H_870_502@'Item 1'@H_502_2@

502_2@@H_870_502@'Item 2'@H_502_2@

@H_870_502@'Item 3'@H_502_2@

@H_870_502@'Item 4'@H_502_2@410@H_502_2@502_2@

colspan 2@H_502_2@

@H_870_502@'Item 5'@H_502_2@

}@H_502_2@]

});@H_502_2@

在示例@H_502_2@4.12中，使用@H_502_2@layout: @H_502_2@‘table’设置了@H_502_2@panel的布局方式为表格布局，然后使用@H_502_2@layoutConfig@H_502_2@设置了表格默认列数是@H_502_2@3@H_502_2@，而@H_502_2@Item4@H_502_2@中使用@H_502_2@colspan@H_502_2@设置了它独占两列。@H_502_2@

1.8Box盒布局@H_502_2@

Box盒布局又分为@H_502_2@HBoxLayout@H_502_2@（水平盒布局）和@H_502_2@VBoxLayout@H_502_2@（垂直盒布局）两种，使用它可以非常方便的实现一行或一列中排列多个组件的效果。下面通过示例@H_502_2@4.13@H_502_2@颜色@H_502_2@HBoxLayout@H_502_2@的使用。@H_502_2@

示例@H_502_2@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

} ]

});

});

在以上代码中，与布局有关的配置放在@H_502_2@layout属性中，使用@H_502_2@type: @H_502_2@‘hBox’指定当前@H_502_2@Panel使用@H_502_2@HBoxLayout@H_502_2@，可以为其中每个组件设置@H_502_2@flex@H_502_2@属性，@H_502_2@flex@H_502_2@属性值越大，对应的组件就会占据越大空间。@H_502_2@HBoxLayout@H_502_2@还支持使用@H_502_2@align@H_502_2@属性对布局中的组件设置统一的对齐方式，如上例中将@H_502_2@align@H_502_2@属性设置为@H_502_2@stretch@H_502_2@，此时@H_502_2@Panel@H_502_2@中组件的高度都自动拉伸以填充外部容器。示例@H_502_2@4.13@H_502_2@的运行效果如图@H_502_2@4.1.11@H_502_2@所示。@H_502_2@

图@H_502_2@4.1.11 HBoxLayout布局@H_502_2@

VBoxLayout与@H_502_2@HBoxLayout@H_502_2@用法类似，这里就不再详述，大家可以自行学习。@H_502_2@

1.9使用嵌套实现复杂布局

上面学习了多种布局，这些布局如果单独使用不能设计出复杂的界面，如果想实现复杂的布局就必须使用布局嵌套，下面是一个嵌套布局的示例。

示例@H_502_2@4.14

Ext{@H_502_2@

layout :@H_502_2@[ .@H_502_2@BoxComponent{@H_502_2@

region 32@H_502_2@502_2@

autoEl {@H_502_2@

tag @H_870_502@'div'@H_502_2@502_2@

html @H_870_502@'<p>顶部标题@H_502_2@</p>'@H_502_2@@H_502_2@

}@H_502_2@

}),255);">'底部状态栏@H_502_2@'@H_502_2@@H_502_2@502_2@

split 502_2@

minSize 502_2@

maxSize 502_2@

collapsible 502_2@

title @H_870_502@'South'@H_502_2@502_2@

margins @H_870_502@'0 0 0 0'@H_502_2@

502_2@

id @H_870_502@'west-panel'@H_502_2@@H_870_502@'West'@H_502_2@175@H_502_2@400@H_502_2@@H_870_502@'0 0 0 5'@H_502_2@{@H_502_2@

type 502_2@

animate true@H_502_2@

{@H_502_2@

html 502_2@

border false@H_502_2@

@H_870_502@'<p>第二栏@H_502_2@</p>'@H_502_2@@H_502_2@@H_870_502@'East Side'@H_502_2@225@H_502_2@400@H_502_2@,@H_502_2@

layout:'fit',

items{@H_502_2@

html@H_870_502@'我会@H_502_2@@H_502_2@填满@H_502_2@父容器@H_502_2@'@H_502_2@

}@H_502_2@,.@H_502_2@TabPanel502_2@

activeTab 0@H_502_2@@H_870_502@'欢迎使用本系统@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'欢迎页面@H_502_2@'@H_502_2@@H_502_2@502_2@

closable 502_2@

autoScroll @H_870_502@'center2'@H_502_2@@H_870_502@'Center Panel'@H_502_2@})@H_502_2@]

});@H_502_2@

上面代码中，首先设置@H_502_2@Viewport的布局为@H_502_2@BorderLayout@H_502_2@，然后对各个子组件再使用不同的布局方式@H_502_2@

本章总结

ØExtJS提供了多种布局方式实现页面布局，@H_502_2@ExtJS常用的布局都在@H_502_2@Ext.layout下@H_502_2@，常见的布局有：@H_502_2@

n最简单布局—FitLayout

n常用布局—BorderLayout

n伸缩菜单布局—Accordion

n控制大小的布局@H_502_2@—AnchorLayout@H_502_2@

n分列式布局—ColumnLayout

n表格布局—TableLayout

nBox盒布局@H_502_2@

Ø布局是可以嵌套的，使用布局嵌套能实现复杂的页面布局。

任务实训部分

1：应用@H_502_2@Ext@H_502_2@布局@H_502_2@

训练技能点

Ø使用@H_502_2@ Ext 进行布局 @H_502_2@

需求说明

（1）使用@H_502_2@Ext布局，将窗口分为上、下、左、右及中间5个部分。

（2）划分窗口布局的运行效果如图@H_502_2@4.2.1所示。

图@H_502_2@4.2.1 Ext窗口布局@H_502_2@

（3）隐藏左右侧窗口，效果如图@H_502_2@4.2.2所示。

图@H_502_2@4.2.2 隐藏左右侧窗口布局@H_502_2@

实现步骤

（1）使用@H_502_2@Viewport作为布局容器，指定布局方式为border。

（2）使用@H_502_2@items属性向容器中添加各个子窗口。

参考代码

<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@H_502_2@502_2@

maxSize:120

},{

title:'south',

region:'south',

html:'south',

minSize:50,

maxSize:120

},{

title:'east',

region:'east',

html:'east',

width:120,

minSize:120,

maxSize:200

},{

title:'west',

region:'west',

html:'west',{

title:'center',

region:'center',

html:'center',

collapsible:true

}]

});

});

</script>

</head>

<body>

</body>

</html>

2：应用@H_502_2@Ext@H_502_2@布局和@H_502_2@Grid@H_502_2@控件@H_502_2@

训练技能点

Ø向@H_502_2@BorderLayout布局中添加@H_502_2@Grid@H_502_2@控件 @H_502_2@

需求说明

在上一个任务布局的中间主体部分添加@H_502_2@Grid表格

实现步骤

（1）实现任务@H_502_2@1的布局。

（2）在中间区域加入@H_502_2@Grid。

参考代码

在任务@H_502_2@1布局的主体部分添加表格：

Ext(){@H_502_2@

var@H_502_2@sm.@H_502_2@grid.@H_502_2@CheckBoxSelectionModel();@H_502_2@

var@H_502_2@cm.@H_502_2@ColumnModel(@H_502_2@[

.@H_502_2@RowNumberer502_2@

sm502_2@

{@H_502_2@header@H_870_502@'编号@H_502_2@'@H_502_2@@H_502_2@502_2@dataIndex@H_870_502@'empId'@H_502_2@502_2@sortable@H_870_502@'姓名@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'userName'@H_502_2@@H_870_502@'性别@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'sex'@H_502_2@@H_870_502@'出生日期@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'birthday'@H_502_2@502_2@

renderer.@H_502_2@util.@H_502_2@Format.@H_502_2@dateRenderer(@H_502_2@'Y-m-d H:i:s'@H_502_2@)},255);">'地址@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'address'@H_502_2@@H_870_502@'备注@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'remark'@H_502_2@}@H_502_2@

]);@H_502_2@

var@H_502_2@data=@H_502_2@[

['0001'@H_502_2@502_2@'故天乐@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'boy'@H_502_2@@H_870_502@'1-2-2011'@H_502_2@@H_870_502@'建设路@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'0001remark'@H_502_2@]502_2@

['0002'@H_502_2@@H_870_502@'周杰伦@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'人民路@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'0002remark'@H_502_2@]@H_870_502@'0003'@H_502_2@@H_870_502@'林志玲@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'girl'@H_502_2@@H_870_502@'大致路@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'0003remark'@H_502_2@]@H_870_502@'0004'@H_502_2@@H_870_502@'蔡依林@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'湖边路@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'0004remark'@H_502_2@]

];@H_502_2@

var@H_502_2@store.@H_502_2@data.@H_502_2@Store({@H_502_2@

proxy:@H_502_2@.@H_502_2@MemoryProxy(@H_502_2@data),@H_502_2@

reader.@H_502_2@ArrayReader({},@H_502_2@[

{@H_502_2@name502_2@

])@H_502_2@

});@H_502_2@

store.@H_502_2@loadvar@H_502_2@grid .@H_502_2@GridPanel({@H_502_2@

title@H_870_502@'操作用户@H_502_2@'@H_502_2@@H_502_2@502_2@

region502_2@

store:@H_502_2@store502_2@

cm:@H_502_2@cm:@H_502_2@sm502_2@

viewConfig:{@H_502_2@forceFit})@H_502_2@;@H_502_2@

var@H_502_2@viewport({@H_502_2@

layout502_2@

items{@H_502_2@

title502_2@

html502_2@

split502_2@

border502_2@

collapsible502_2@

minSize502_2@

maxSize120@H_502_2@

502_2@

title502_2@

width120@H_502_2@502_2@grid]

});@H_502_2@

3：@H_502_2@应用复杂@H_502_2@Form布局@H_502_2@

训练技能点

ØForm布局@H_502_2@

Ø多种布局综合应用

需求说明

实现如图@H_502_2@4.2.4所示复杂@H_502_2@Form@H_502_2@布局。@H_502_2@

图@H_502_2@4.2.4 复杂@H_502_2@Form@H_502_2@布局@H_502_2@

实现步骤

(1)使用@H_502_2@FormPanel作为布局容器@H_502_2@

(2)在容器中使用其它布局加入其它控件

参考代码如下所示：

Extvar@H_502_2@top .@H_502_2@FormPanel({@H_502_2@

labelAlign@H_870_502@'top'@H_502_2@502_2@

frame502_2@

title@H_870_502@'用户注册@H_502_2@'@H_502_2@@H_502_2@502_2@

bodyStyle@H_870_502@'padding:5px 5px 0'@H_502_2@600@H_502_2@{@H_502_2@

layout@H_870_502@'column'@H_502_2@{@H_502_2@

columnWidth:.@H_502_2@5@H_502_2@@H_870_502@'form'@H_502_2@{@H_502_2@

xtype@H_870_502@'textfield'@H_502_2@502_2@

fieldLabel@H_870_502@'账号@H_502_2@'@H_502_2@@H_502_2@502_2@

name@H_870_502@'first'@H_502_2@502_2@

anchor@H_870_502@'95%'@H_502_2@

@H_870_502@'公司@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'company'@H_502_2@502_2@

columnWidth@H_870_502@'真实姓名@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'realName'@H_502_2@502_2@

xtype@H_870_502@'电子邮件@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'email'@H_502_2@502_2@

vtype@H_870_502@'htmleditor'@H_502_2@502_2@

id@H_870_502@'bio'@H_502_2@@H_870_502@'工作简历@H_502_2@'@H_502_2@@H_502_2@502_2@

height@H_870_502@'98%'@H_502_2@

}@H_502_2@]502_2@

buttons{@H_502_2@

text@H_870_502@'提交@H_502_2@'@H_502_2@@H_502_2@

502_2@

text@H_870_502@'取@H_502_2@@H_502_2@消@H_502_2@'

});@H_502_2@

top.@H_502_2@render(@H_502_2@document.@H_502_2@body);@H_502_2@

});@H_502_2@

4：@H_502_2@实现点击树形菜单后向主区域添加组件@H_502_2@

训练技能点

ØTree控件事件处理@H_502_2@

Ø向@H_502_2@TabPanel容器中添加组件@H_502_2@

需求说明

在常见的管理系统布局中，当点击左边树形菜单后，就会有不同的内容显示到右边主区域中@H_502_2@。@H_502_2@

图@H_502_2@4.2.5 系统首页@H_502_2@

图@H_502_2@4.2.6 点击操作用户后界面@H_502_2@

实现步骤

(1)首先使用@H_502_2@BorderLayout对页面进行整体布局@H_502_2@

(2)处理树控件事件

(3)根据点击的树节点，向中间区域加入对应组件

参考代码如下所示：

Ext({@H_502_2@

id@H_870_502@'usergrid'@H_502_2@var@H_502_2@tree .@H_502_2@tree.@H_502_2@TreePanel{@H_502_2@

collapsible @H_870_502@'管理菜单@H_502_2@'@H_502_2@@H_502_2@false@H_502_2@502_2@

loader .@H_502_2@TreeLoader502_2@

root .@H_502_2@AsyncTreeNode{@H_502_2@

text @H_870_502@'系统管理@H_502_2@'@H_502_2@@H_502_2@502_2@

expanded 502_2@

icon @H_870_502@'img/13.png'@H_502_2@502_2@

children @H_870_502@'用户管理@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'img/users.png'@H_502_2@{@H_502_2@

id@H_870_502@'userinfo'@H_502_2@502_2@

text @H_870_502@'img/user.png'@H_502_2@502_2@

leaf @H_870_502@'userright'@H_502_2@@H_870_502@'用户权限@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'img/usericon.png'@H_502_2@@H_870_502@'客户管理@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'img/60.png'@H_502_2@@H_870_502@'客户维护@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'img/61.png'@H_502_2@@H_870_502@'客户关系@H_502_2@'@H_502_2@@H_502_2@@H_870_502@'img/62.png'@H_502_2@502_2@

listeners:{@H_502_2@

click(@H_502_2@n){@H_502_2@

if@H_502_2@.@H_502_2@leafvar@H_502_2@nid =@H_502_2@n.@H_502_2@id(@H_502_2@nid ==@H_502_2@var@H_502_2@usergrid =@H_502_2@tabs.@H_502_2@get(!@H_502_2@usergrid){@H_502_2@

tabs.@H_502_2@add(@H_502_2@grid);@H_502_2@

}@H_502_2@

tabs.@H_502_2@setActiveTab}@H_502_2@else@H_502_2@var@H_502_2@userrightPanel @H_870_502@'userrightPanel'@H_502_2@(!@H_502_2@userrightPanel){@H_502_2@

userrightPanel @H_870_502@'用户权限@H_502_2@'@H_502_2@@H_502_2@

});@H_502_2@

tabs(@H_502_2@userrightPanel});@H_502_2@

var@H_502_2@tabs ({@H_502_2@

region@H_870_502@'首页@H_502_2@'@H_502_2@@H_502_2@502_2@

autoHeight@H_870_502@"欢迎使用本系统！以下是你需要处理的任务！@H_502_2@<br/>@H_502_2@你有@H_502_2@<a href=#>30</a>@H_502_2@封新邮件@H_502_2@<br/>"@H_502_2@@H_502_2@

(@H_502_2@);@H_502_2@

502_2@

region180@H_502_2@:@H_502_2@tree

502_2@tabs]

});@H_502_2@

巩固练习

一、选择题

1.使用了@H_502_2@FitLayout的容器里面能添加（ ）个控件。@H_502_2@

A.1个@H_502_2@

B.2个@H_502_2@

C.3个@H_502_2@

D.不限制

2.BorderLayout使用（@H_502_2@ ）属性设置子控件在容器中的方位。

A.items

B.title

C.region

D.border

3.BorderLayout必须包含（@H_502_2@ ）区域。

A.north

B.west

C.east

D.center

4.AnchorLayout中使用（@H_502_2@ ）属性设置子控件所占的大小。

A.width

B.height

C.anchor

D.border

5.ColumnLayout中使用（@H_502_2@ ）属性设置子控件所占的宽度。

A.columnWidth

B.width

C.itemWidth

D.autoWidth