ExtJs布局
1. Auto 默认布局
Auto布局是ExtJs的默认布局,当我们不指定任何layout的时候,用Auto Layout来组织子元素。
Ext.onReady(function() {
var childPnl1 = {
frame : true,
height : 50,
html : 'My First Child Panel',
title : 'First children are fun'
};
var childPnl2 = {
xtype : 'panel',
width : 150,
html : 'Second child',
title : 'Second children have all the fun!'
};
var myWin = Ext.create("Ext.Window", {
height : 300,
width : 300,
title : 'A window with a container layout',
autoScroll : true,
items : [
childPnl1,
childPnl2
]
});
myWin.show();
});
上面的代码既是在一个window组价中包含了两个panel组件,没有指定布局方式,因此组件将按默认方式自动排列。
2. Anchor 锚点布局
Anchor布局将使组件固定于父容器的某一个位置,使用anchor布局的子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
AnchorLayout布局没有任何的直接配置选项(继承的除外),然而在使用AnchorLayout布局时,其子组件都有一个anchor属性,用来配置此子组件在父容器中所处的位置。
Anchor属性为一组字符串,可以使用百分比或者是-数字来表示。配置字符串使用空格隔开,例如:
- anchor:’75% 25%’,表示宽度为父容器的75%,高度为父容器的25%
- anchor:’-295 -300’,表示组件相对于父容器右边距为295,相对于父容器的底部位300
- anchor:’-250 10%’,混合模式,表示组件党对于如容器右边为250,高度为父容器的10%
var myWin = Ext.create("Ext.Window", {
height : 300,
width : 300,
layout : 'anchor',
autoScroll : true,
border : false,
anchorSize : '400',
items : [
{
title : 'Panel1',
anchor : '100%, 25%',
frame : true
},
{
title : 'Panel2',
anchor : '0, 50%',
frame : true
},
{
title : 'Panel3',
anchor : '50%, 25%',
frame : true
}
]
});
运行结果:
当anchor的配置为百分比时,分别表示所占父容器宽、高的百分比。
var myWin = Ext.create("Ext.Window", {
height : 300,
width : 300,
layout : 'anchor',
autoScroll : true,
id : 'myWin',
border : false,
anchorSize : '400',
items : [
{
title : 'Panel1',
anchor : '-50, -150',
frame : true
},
{
title : 'Panel2',
anchor : '-10, -150',
frame : true
}
]
});
运行结果:
当anchor的配置为数字时(一般为负数),分别表示自己的宽、高为父容器宽、高尺寸与配置的数字相加,即减去这个数字的绝对值,因此数字通常为负数。当数字为正时,子元素尺寸会超过父元素大小。
3. Absolute 绝对布局
Absolute布局是继承自Anchor布局的,但是Absolute是使用标准的x,y来定义子元素的坐标,所以当父容器大小改变时,子元素不会随之变化。
Ext.onReady(function() {
var myWin = Ext.create("Ext.Window", {
height : 300,
width : 300,
layout : 'absolute',
autoScroll : true,
id : 'myWin',
border : false,
items : [
{
title : 'Panel1',
x : 50,
y : 50,
height : 100,
width : 100,
html : 'x: 50, y:100',
frame : true
},
{
title : 'Panel2',
x : 90,
y : 120,
height : 75,
width : 100,
html : 'x: 90, y: 120',
frame : true
}
]
});
myWin.show();
});
运行结果:
4. Accordion 手风琴布局(可折叠布局)
Accordion顾名思义,是一种可折叠的布局,类似于手风琴的样式,所以通常被用来作为导航栏或一级菜单,在其面板上定义菜单树。
Ext.onReady(function () {
var myWin = Ext.create("Ext.Window", {
height: 200,
width: 300,
border: false,
title: 'A Window with an Accordion layout',
layout: 'accordion',
layoutConfig: {
animate: false
},
items: [{
xtype: 'form',
title: 'General info',
bodyStyle: 'padding: 5px',
defaultType: 'textfield',
fieldDefaults: {
labelWidth: 50
},
items: [{
fieldLabel: 'Name',
anchor: '-10',
width: 20
},
{
xtype: 'field',
fieldLabel: 'Age',
anchor: '-10',
size: 3
},
{
xtype: 'combo',
fieldLabel: 'Location',
anchor: '-10',
store: ['Here', 'There', 'Anywhere']
}
]
},
{
xtype: 'panel',
autoEl: {},
title: 'Bio',
layout: 'fit',
items: {
xtype: 'textarea',
value: 'Tell us about yourself'
}
},
{
title: 'Instructions',
html: 'Please enter information.',
tools: [{
id: 'gear'
}, {
id: 'help'
}]
}
]
});
myWin.show();
});
运行结果:
每一栏都可以展开和收缩,并且只有一栏被展开。
5. Border 边界布局
Border布局是将页面划分为东,南,西,北,中五个部分,也是最常见的一种布局方式,我们可以根据项目的实际需求保留其中的部分区域,而将其他部分隐藏掉,灵活性很高。
Ext.onReady(function () {
Ext.create("Ext.Viewport", {
layout: 'border',
defaults: {
frame: true,
split: true
},
items: [{
title: 'North Panel',
region: 'north',
height: 100,
minHeight: 100,
maxHeight: 150,
collapsible: true
},
{
title: 'South Panel',
region: 'south',
height: 75,
split: false,
margins: {
top: 5
}
},
{
title: 'East Panel',
region: 'east',
width: 100,
minWidth: 75,
maxWidth: 150,
collapsible: true
},
{
title: 'West Panel',
region: 'west',
collapsible: true,
collapseMode: 'mini',
width: 100
},
{
xtype: 'container',
region: 'center',
layout: 'fit',
id: 'centerRegion',
autoEl: {},
items: {
title: 'Center Panel',
id: 'centerPanel',
html: 'I am disposable',
frame: true
}
}
]
});
});
这段代码中每一个items都有一个region属性,分别指定了组件所在布局的方位。collapsible属性表示该区域是否可以收缩,collapseMode指定收缩后的显示情况,mini将不显示面板原来的标题。
运行结果:
6. Card 卡片布局
Card 布局是一种向导试的布局方式,它在显示的时候,本身是没有上一步、下一步按钮的,但提供了上一步、下一步的操作方法,我们需要在界面中添加导航按钮来配合实际的业务需要。
Ext.onReady(function () {
var handleNav = function (btn) {
var activeItem = myWin.layout.activeItem,
index = myWin.items.indexOf(activeItem),
numItems = myWin.items.getCount(),
indicatorEl = Ext.getCmp('indicator').el;
if (btn.text == 'Forward' && index < numItems - 1) {
index++;
myWin.layout.setActiveItem(index);
indicatorEl.update((index + 1) + ' of ' + numItems);
} else if (btn.text == 'Back' && index > 0) {
myWin.layout.setActiveItem(index - 1);
indicatorEl.update(index + ' of ' + numItems);
}
};
var myWin = Ext.create("Ext.Window", {
height: 200,
width: 300,
autoScroll: true,
id: 'myWin',
title: 'A Window with a Card layout',
layout: 'card',
activeItem: 0,
defaults: {
border: false
},
items: [{
id: "card0",
html: "first card"
},
{
id: "card1",
html: "second card"
},
{
id: "card2",
html: "third card"
}
],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Back',
handler: handleNav
},
'-',
{
text: 'Forward',
handler: handleNav
},
'->',
{
type: 'component',
id: 'indicator',
style: 'margin-right: 5px',
html: '1 of 3'
}
]
}]
});
});
dockedItems通常用来设置toolbar或菜单栏的位置,常设置为top,bottom分别放置在顶部和底部。
运行结果:
7. Fit 填充
Fit Layout 是很常用的一种布局,在Fit布局中,子元素将自动填满整个父容器。
在Fit 布局下,对其子元素设置宽度是无效的。如果在Fit 布局中放置了多个组件,则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件,grid组件的大小会随着父容器的大小改变而改变。
Ext.onReady(function() {
var myWin = Ext.create("Ext.Window", {
height : 200,
width : 200,
layout : 'fit',
autoScroll : true,
border : false,
items : [
{
title : 'Panel1',
html : 'I fit in my parent!',
frame : true
}
]
});
myWin.show();
});
运行结果:
8. Column 列布局
Column 布局用来创建一个多列的布局格式,列宽度可以使用像素值或百分比。
Column布局支持一个columnWidth属性,在布局过程中,使用columnWidth指定每个面板的宽度的百分比,他们的和加起来为1。
columnWidth和width可混合使用,这个时候系统将减去width占用的宽度,然后再根据百分比计算列的宽度。
另外,如果任何子面板没有指定columnWidth值,那么它将占满剩余的空间
Ext.onReady(function () {
var myWin = Ext.create("Ext.Window", {
height: 200,
width: 400,
autoScroll: true,
id: 'myWin',
title: 'A Window with a Column layout',
layout: 'column',
defaults: {
frame: true
},
items: [{
title: 'Col 1',
id: 'col1',
columnWidth: .3
},
{
title: 'Col 2',
html: "20% relative width",
columnWidth: .2
},
{
title: 'Col 3',
html: "100px fixed width",
width: 100
},
{
title: 'Col 4',
frame: true,
html: "50% relative width",
columnWidth: .5
}
],
renderTo: Ext.getBody()
});
myWin.show();
});
运行结果:
9. Table 表格布局
Table Layout 将内容绘制在table标签中,table的列数可以指定,还可以通过设置rowSpan和colSpan来创建复杂的布局。
Ext.onReady(function () {
var myWin = Ext.create("Ext.Window", {
height: 300,
width: 300,
border: false,
autoScroll: true,
id: 'myWin',
title: 'A Window with a Table layout',
layout: {
type: 'table',
columns: 3
},
defaults: {
height: 50,
width: 50
},
items: [{
html: '1'
},
{
html: '2'
},
{
html: '3'
},
{
html: '4'
},
{
html: '5'
},
{
html: '6'
},
{
html: '7'
},
{
html: '8'
},
{
html: '9'
}
]
});
myWin.show();
});
运行结果:
10. Hbox和Vbox
Hbox
HBox Layout 将子元素放在同一水平位置,通过align设置子元素的对齐方式,对齐方式有:
- top : 默认的对其方式,顶部对齐
- middle : 中间对齐
- bottom : 底部对齐
- stretch : 拉伸对齐,所有子元素根据父容器的高度拉伸
- stretchmax : 拉伸对齐,所有子元素根据子元素中最高的高度拉伸
Ext.onReady(function () {
var myWin = Ext.create("Ext.Window", {
width: 500,
height: 300,
title: "HBoxLayout Panel",
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
title: 'Inner Panel One',
flex: 2
}, {
xtype: 'panel',
title: 'Inner Panel Two',
flex: 1
}, {
xtype: 'panel',
title: 'Inner Panel Three',
flex: 1
}],
});
myWin.show();
});
运行结果:
Vbox
VBox Layout 以垂直的方式组织所有子元素。它的子元素可以通过align属性来设置对齐方式,vbox的对齐方式有:
- left : 左对齐,默认对其方式
- center : 中间对齐
- right : 右对齐
- stretch : 以父容器的宽度拉伸对齐
- stretchmax : 以所有子元素中的最大宽度拉伸对齐
Ext.onReady(function () {
var myWin = Ext.create("Ext.Window", {
width: 500,
height: 400,
title: "VBoxLayout Panel",
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'panel',
title: 'Inner Panel One',
width: 250,
flex: 2
},
{
xtype: 'panel',
title: 'Inner Panel Two',
width: 250,
flex: 4
},
{
xtype: 'panel',
title: 'Inner Panel Three',
width: '50%',
flex: 4
}],
});
myWin.show();
});
运行结果:
11. Form 表单布局
Form Layout 用来组织表单字段的,Form Layout 下的表单字段会被拉伸到表单的宽度。
var panel = Ext.create("Ext.panel.Panel", {
width: 350,
height: 240,
title: "FormLayout Panel",
layout: 'form',
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: '姓名',
name: 'name',
allowBlank: false
}, {
fieldLabel: '公司',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}, {
fieldLabel: '年龄',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}],
renderTo: Ext.getBody()
});
运行结果: