By Alex
/ in
0
浅析ExtJS 4布局组件
在ExtJS中，布局决定组件的位置如何分布、尺寸如何确定。ExtJS 4对整个布局体系进行了改造，布局引擎被重新编写，提高了性能。
ExtJS 4中的布局
ExtJS 4把布局分为两类：
- 容器布局（Container Layout）：组织一个组件的HTML元素。包括Border Layout、Hbox Layout、Vbox Layout、Fit Layout等
- 组件布局（Component Layout）：决定容器中子组件的大小、位置。包括Dock Layout、Toolbar Layout、Field Layout、TriggerField Layout等
容器布局
在ExtJS 4中Auto Layout替换了ExtJS 3中的ContainerLayout，作为默认的容器布局类，如果容器没有指定布局，则自动使用Auto Layout。
Form Layout已经不再支持，并且由组件布局Field Layout（组件布局）代替。
容器布局的类层次如下图：
Auto Layout
该布局的特点：
- 依据声明的顺序，子组件自上而下的排列
- 子组件需要显式声明宽高度
- 改变容器的大小后，子组件不跟随改变大小（即使子组件指定百分比）
- 如果容器的尺寸不够，子组件可能重叠在一起
代码示例：
var w = Ext.create( 'Ext.window.Window', {
title : 'Auto Layout',
width : 200,
height : 320,
layout : 'auto',
defaults : {
bodyStyle : 'padding:15px'
},
items : [
{ title : 'Panel 1', html : 'Panel 1', height : 60, width : 100 },
{ title : 'Panel 2', html : 'Panel 2', height : 80, width : 60 },
{ title : 'Panel 3', html : 'Panel 3', height : 65, width : 100 },
{ title : 'Panel 4', html : 'Panel 4', height : 70, width : '90%'}
]
} );
w.show();
效果图：
Anchor Layout
该布局的特点：
- 依据声明的顺序，子组件自上而下的排列
- 子组件依据自身指定的锚定规则（anchor配置项）来确定尺寸、位置
- 父容器大小变化后，子组件的大小自动变化
代码示例：
var w = Ext.create( 'Ext.window.Window', {
title : 'Auto Layout',
width : 250,
height : 300,
layout :'anchor',
defaults : {
bodyStyle : 'padding:15px'
},
items : [
//正数表示宽高度占有容器的百分比
{ title : 'Panel 1', html: '100% 30%', anchor : '100% 30%'},
{ title : 'Panel 2', html: '80% 25%', anchor : '80% 25%'},
//负数表示宽高度 = 容器宽高度 - abs(负数)
{ title : 'Panel 3', html: '-70 20%', anchor : '-70 20%' },
//如果指定x、y，则可以指定其相对于前一个兄弟组件的位置偏移
{ title : 'Panel 4', html: '-30 25%', anchor : '-30 25%', x : 0, y :0}
]
} );
w.show();
效果图：
Absolute Layout
该布局的特点：
- 该布局继承自Anchor Layout，具有其特点
- 子组件根据x、y设置，相对于父容器的body左上角进行绝对定位
代码示例：
var w = Ext.create( 'Ext.window.Window', {
title : 'Absolute Layout',
width : 250,
height : 300,
layout :'absolute',
defaults : {
bodyStyle : 'padding:15px'
},
items : [
{ title : 'Panel 1', html: 'x: 10; y: 10 - anchor: 80% 80%', anchor:'80% 80%', x: 10, y: 10}
]
} );
w.show();
效果图：
HBox Layout
该布局的特点：
- 子组件水平的分布在容器内
- 通过flex配置项，可以指定子组件如何划分水平方向的空白区域
- 通过pack配置项，可以指定子组件如何在水平方向连续分布，支持值：start、center、end
- 通过align配置项，可以决定子组件在垂直方向如何对齐（或伸展），支持值：stretch、stretchmax、top、middle
代码示例：
//例一：
var w = Ext.create( 'Ext.window.Window', {
title : 'Hbox Layout',
width : 500,
height : 250,
layout :{
type : 'hbox',
/**
* 对齐方式，决定了纵向的高度与位置：
* stretch ：自动伸展填满容器
* stretchmax ：自动伸展，使所有子组件与最大高度子组件同高
* top ：顶端对齐子组件（默认）
* middle ：中部对齐子组件
*/
align : 'middle'
},
items : [
//flex用于设置子组件占有容器可用宽度（除去固定宽度组件占用的部分）的比例
{ title : 'Panel 1', html : 'flex:1', flex : 2, height : 100},
{ title : 'Panel 2', html : 'flex:2', flex : 1, height : 80},
//该组件为固定宽度
{ title : 'Panel 3', html : 'width:100', width : 100, height : '50%'}
]
} );
w.show();
//例二：
var w = Ext.create( 'Ext.window.Window', {
title : 'Hbox Layout',
width : 500,
height : 250,
layout :{
type : 'hbox',
/**
* pack在任何一个子组件指定了flex时没有意义
* start ：靠左对齐
* center ：中间对齐
* end ：靠右对齐
*/
pack : 'end',
align : 'middle',
//为所有子组件外围添加的补白
padding : '0 50 0 50'
},
items : [
{ title : 'Panel 1', html : 'flex:1<br>height : 100', height : 100},
{ title : 'Panel 2', html : 'flex:2<br>height : 80', height : 80},
{ title : 'Panel 3', html : 'width:100<br>height : 150', width : 100, height : 150}
]
} );
w.show();
例一的效果图：
例二的效果图：
VBox Layout
该布局的特点与Hbox非常类似，只是在排列方向上不同：
- 子组件垂直的分布在容器内
- 通过flex配置项，可以指定子组件如何划分水平方向的空白区域
- 通过pack配置项，可以指定子组件如何在垂直方向连续分布，支持值：start、center、end
- 通过align配置项，可以决定子组件在水平方向如何对齐（或伸展），支持值：stretch、stretchmax、left、center
代码示例：
var w = Ext.create( 'Ext.window.Window', {
title : 'Vbox Layout',
width : 250,
height : 500,
layout :{
type : 'vbox',
pack : 'end',
align : 'center'
},
items : [
{ title : 'Panel 1', html : 'width:100,height:100',width:100, height : 100},
{ title : 'Panel 2', html : 'width:150,height:150',width:150, height : 150},
{ title : 'Panel 3', html : 'width:120,height:120', width : 120, height : 120}
]
} );
w.show();
效果图：
Accordion Layout
该布局是Vbox布局的子类，其特点为：
- 每次只显示一个子组件
- 可以展开某个处于收缩状态的子组件
代码示例：
var w = Ext.create( 'Ext.window.Window', {
title : 'Accordion Layout',
width : 200,
height : 400,
layout : 'accordion',
items : [
{ title : 'Panel 1', html : 'Panel 1', height : 100},
{ title : 'Panel 2', html : 'Panel 2', height : 100},
{ title : 'Panel 3', html : 'Panel 3', height : 100}
]
} );
w.show();
效果图：
Table Layout
该布局的特点：
- 把组件渲染到HTML的table元素内部
- 可以指定某个子组件跨越的行、列数
代码示例：
var table = Ext.create( 'Ext.window.Window', {
title : 'Table Layout',
width : 400,
height : 300,
layout : {
type : 'table',
columns : 3, //表格包含的列数
tableAttrs : { //应用到生成的table元素的属性
style : {
width : '90%',
height : '100%'
}
}
},
defaults : {
bodyStyle : 'padding:10px'
},
items : [
{
html : 'Cell 1',
rowspan : 3 //跨越3行
}, {
html : 'Cell 2'
}, {
html : 'Cell 3'
}, {
html : 'Cell 4'
}, {
html : 'Cell 5'
}, {
html : 'Cell 6',
colspan : 2 //跨越2列
}, {
html : 'Cell 7'
}, {
html : 'Cell 8'
}, {
html : 'Cell 9'
}
]
} );
table.show();
效果图：
Column Layout
该布局的特点：
- 子组件水平分布
- 容器管理子组件的宽度，可以通过columnWidth来指定宽度
- 通常用于GridPanel的列的布局
代码示例：
var w = Ext.create( 'Ext.window.Window', {
title : 'Accordion Layout',
width : 400,
height : 100,
layout : 'column',
items : [
{ title : 'Panel 1', html : '.25', columnWidth: .25},
{ title : 'Panel 2', html : '.25', columnWidth: .25},
{ title : 'Panel 3', html : '1/2', columnWidth: 1/2}
]
} );
w.show();
效果图：
Fit Layout
该布局的特点：
- 容器只能有唯一的子组件
- 该组件充满容器的全部可用空间
代码示例：
var w = Ext.create( 'Ext.window.Window', {
title : 'Fit Layout',
width : 300,
height : 350,
layout : 'fit',
items : [
{ title : 'Panel 1', html : 'Fit'}
]
} );
w.show();
效果图：
Card Layout
该布局是Fit Layout的子类型，特点为：
- 与Fit Layout类似，每次只能显示一个子组件
- 可以配置多个子组件
- 可以切换子组件的显示
代码示例：
function navHandler( btn )
{
var activeItem = card.layout.activeItem; //获取当前激活的子组件
var active = card.items.indexOf( activeItem );
if ( btn.id == 'nextButton' ) active += 1;
else if ( btn.id == 'prevButton' ) active -= 1;
card.layout.setActiveItem( active ); //通过序号激活子组件
var prev = card.dockedItems.items[1].items.items[0];
var next = card.dockedItems.items[1].items.items[2];
if ( active == 0 ) prev.setDisabled( true );
else if ( active == 1 )
{
prev.setDisabled( false );
next.setDisabled( false );
}
else if ( active == 2 ) next.setDisabled( true );
};
var card = Ext.create( 'Ext.window.Window', {
title : 'Card Layout',
width : 350,
height : 200,
layout : 'card',
activeItem : 0,
defaults : {
border : false
},
bbar : [
{
id : 'prevButton',
text : 'Preivous Step',
handler : navHandler,
disabled : true
}, '->', //该记号用于占满多余的空间
{
id : 'nextButton',
text : 'Next Step',
handler : navHandler
}
],
items : [
{
html : 'Step 1 of 3'
}, {
html : 'Step 2 of 3'
}, {
html : 'Step 3 of 3'
}
]
} );
card.show();
效果图：
Border Layout
该布局的特点：
把容器划分为东西南北中五个区域：
- 最多有五个子组件，最少一个子组件，中间区域必不可少
- 每个子组件需要指定其占据的区域（region）
- 除了中间区域，其他区域可以收缩
- 南北区域可以指定高度，东西区域可以指定宽度，剩余的区域由中间占有
该布局的示意图如下：
代码示例：
var border = Ext.create( 'Ext.window.Window', {
width : 700,
height : 500,
title : 'Border Layout',
layout : 'border',
defaults : {
xtype : 'panel'
},
items : [
{
title : 'North Region is resizable',
region : 'north', //子组件占据的区域
height : 100, //南北区域可以指定高度
split : true
}, {
title : 'South Region is resizable',
region : 'south',
height : 100,
split : true
}, {
title : 'West Region is collapsible',
region : 'west',
width : 200, //东西区域可以指定宽度
collapsible : true,
layout : 'fit'
}, {
title : 'East Region is collapsible',
region : 'east',
width : 200,
collapsible : true,
layout : 'fit'
}, {
//剩余空间全部归中间区域
title : 'Center Region',
region : 'center',
layout : 'fit'
}
]
} );
效果图：
组件布局
与容器布局不同，组件布局关注组件内部结构（而不是容器的子组件）组成的大小、位置。
Dock Layout
Dock Layout主要用于提高面板头（Header）、工具栏（Toolbar）的灵活性。
考虑以下包含了若干工具栏配置的面板：
Ext.create( 'Ext.panel.Panel', {
collapsible : true,
width : 400,
renderTo : Ext.getBody(),
title : 'Ext 4 Panel - Header',
html : 'Panel body HTML', //面板体的HTML内容
//顶部工具栏
tbar : Ext.create( 'Ext.toolbar.Toolbar', {
items : [
{
type : 'button',
text : 'Button - Top Toolbar'
}
]
} ),
//顶部工具栏
bbar : Ext.create( 'Ext.toolbar.Toolbar', {
items : [
{
type : 'button',
text : 'Button - Bottom Toolbar'
}
]
} ),
//脚注工具栏
fbar : Ext.create( 'Ext.toolbar.Toolbar', {
items : [
{
type : 'button',
text : 'Button - Footer Toolbar'
}
]
} )
} );
其UI效果图如下：
从生成的HTML元素的角度来看，该面板包含一个外部包装元素（outer wrapper element）,该包装元素包含面板头、面板体包装元素两个部分，后者由顶栏、面板体元素、底栏、脚注栏几个部分组成，如下图 所示：
可以看到，在默认情况下，顶部工具栏、面板头、面板体、底部工具栏等的相对位置关系是固定的，ExtJS 3中，无法改变这种位置关系，ExtJS 4则包含若干改进，便于用户在多个位置摆放工具栏：
- 面板头被抽象为组件（Ext.panel.Header），允许设置其位置为top、bottom、left、right
- 可以使用dockedItems来配置各工具栏，从而将其放在任何方向
使用上述改进来配置面板头、工具栏，代码如下：
Ext.create( 'Ext.panel.Panel', {
collapsible : true,
width : 400,
height : 400,
border : true,
renderTo : Ext.getBody(),
title : 'Ext 4 Panel - Header',
headerPosition : 'right', //面板头的位置，改在右边
html : 'Panel Body HTML',
dockedItems : [
{
xtype : 'toolbar',
dock : 'left', //该工具栏放在左边
items : [
{
xtype : 'button',
text : 'Left Toolbar'
}
]
}, {
xtype : 'toolbar',
dock : 'bottom',
items : [
{
xtype : 'button',
text : 'Bottom Toolbar'
}
]
}, {
xtype : 'toolbar',
dock : 'bottom',
items : [
{
xtype : 'component',
flex : 1
}, {
xtype : 'button',
text : 'Footer Toolbar'
}
]
}
]
} );
效果图：
出于对ExtJS 3兼容性的考虑，ExtJS 4仍然支持tbar、bbar、fbar，并且新增了rbar、lbar两个类似的配置项。
Toolbar Layout
面板头工具（Header Tools）在ExtJS 4中也作为组件看待，ExtJS会在面板头部显示一系列的图标，其行为需要用户自行定义：
Ext.create( 'Ext.panel.Panel', {
width : 500,
renderTo : Ext.getBody(),
html : 'Panel',
title : 'Tools - Header',
tools : [
{
type : 'close',
handler : function()
{}//定义按钮的行为
}, {
type : 'collapse'
}, {
type : 'down'
}, {
type : 'expand'
}, {
type : 'gear'
}, {
type : 'help'
}, {
type : 'left'
}, {
type : 'maximize'
}, {
type : 'minimize'
}, {
type : 'minus'
}, {
type : 'next'
}, {
type : 'pin'
}, {
type : 'plus'
}, {
type : 'prev'
}, {
type : 'print'
}, {
type : 'refresh'
}, {
type : 'restore'
}, {
type : 'right'
}, {
type : 'save'
}, {
type : 'search'
}, {
type : 'toggle'
}, {
type : 'unpin'
}, {
type : 'up'
}
]
} );
效果图如下：
Field Layout
在ExtJS 4中，FormLayout不再被支持，组织表单字段布局的职责由新引入的FieldLayout承担。ExtJS 4的表单布局具有以下特性：
- 表单容器默认使用Anchor Layout
- 不再需要为字段指定绝对值宽度，而可以使用anchor指定百分比或者负数
- 表单中的单个字段（Ext.form.field.Field）的输入框、错误信息由字段布局（Field Layout）确定。在显示错误信息时，ExtJS自动收缩表单字段，以腾出空间。因此，用户不需要考虑如何为错误信息预留空间
下面是一个ExtJS 4表单的例子：
//通过设置ExtJS类的原型对象的属性，可以影响所有以后创建的实例
Ext.form.Field.prototype.msgTarget = 'side';
Ext.create( 'Ext.form.Panel', {
frame : true,
title : 'Form',
margin : 5,
bodyStyle : 'padding:5px 5px 0',
width : 350,
renderTo : Ext.getBody(),
fieldDefaults : {
msgTarget : 'side',
labelWidth : 75
},
defaultType : 'textfield',
//可以指定任何布局方式
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
//与ExtJS 3不同，不需要指定字段宽度，而可以使用anchor指定宽度（支持百分比、负数）
anchor : '100%'
},
items : [
{
fieldLabel : 'First Name',
name : 'first'
}, {
fieldLabel : 'Last Name',
name : 'last'
}
]
} );
TriggerField Layout
与Field Layout类似，该布局机制可以为Trigger字段的错误信息自动预留空间。
Leave a Reply