按照Extjs的4.1的文档来看，extjs的布局方式大致有12种，下面一一介绍，有些代码就是文档中的。 1.Border 边界布局 border布局，最多可以将页面分割为“东南西北中”五部分，是最常用的一种布局方式。我们可以根据项目的实际需求保留其中的部分区域，而将其他部分隐藏掉。
1.2 代码demo Ext.onReady(function () {
new Ext.Viewport({
title: "border layout",
layout: "border",
defaults: {
bodyStyle: "background-color: #FFFFFF;",
frame: true
},
items: [
{ region: "west", width:90, title: 'west', collapsible: true },
{ region: "east", width: 90, title: 'east', collapsible: true },
{ region: "north", height: 100, title:'north' , collapsible:true },
{ region: "center", split: true, border: true, collapsible: true,title:'center' },
{ region: "south", title:"south", split: true, border: true, collapsible: true, height: 100 },
]
});
});
1.3 关注点 a.north和south区域需要指定高度height,west和east区域需要指定宽度width。 b.尽管当不包含center组件时，页面并不会由于语法错误而无法显示，但页面中会有一部分区域空出来。所以在使用border布局时，必须要定义其center区域。 c.center域不必赋予其宽度和高度，即使你定义了其宽高也不会有任何效果；当其他区域未定义比如south，center域会自动填充空出来的部分， 2.accordion 手风琴布局【可折叠布局】可折叠的accordion通常被用来作为导航栏或一级菜单来使用，手风琴的每个title定义为一级菜单，在其面板上定义菜单树，就是一个完整的导航了。
2.2代码demo Ext.onReady(function () {
var accordion = Ext.create("Ext.panel.Panel", {
title: "west",
layout: "accordion",
layoutConfig: {
animate: true
},
width: 250,
minWidth: 90,
region: "west",
split: true,
collapsible: true,
items: [
{ title: "面板一", html: "面板一", iconCls: "save" },
{ title: "面板二", html: "面板二", iconCls: "search" },
{ title: "面板三", html: "面板三", iconCls: "back" },
{ title: "面板四", html: "面板四", iconCls: "12" }
]
});
new Ext.Viewport({
title: "Viewport",
layout: "border",
defaults: {
bodyStyle: "background-color: #FFFFFF;",
frame: true
},
items: [
accordion,
{region: "east", width: 90, title: 'east', collapsible: true },
{ region: "north", height: 100, title: 'north', collapsible: true },
{ region: "center", split: true, border: true, collapsible: true, title: 'center' },
{ region: "south", title: "south", split: true, border: true, collapsible: true, height: 100 }
]
});
});
2.3 关注点a.只有 Ext的各种Panel和Ext.panel.Panel的子类可以用于这种布局的容器中. 3.Anchor 锚点布局锚点布局将子元素与父容器绑定到了一块，当父容器大小发生改变时，所有固定的子项将按各自的anchor 规则自动被重新渲染固定.
3.2 代码demo Ext.onReady(function(){
Ext.application({
name: 'anchor',
launch: function () {
Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "AnchorLayout Panel",
layout: 'anchor',
x:100,
y:100,
renderTo: Ext.getBody(),
items: [
{
xtype: 'panel',
title: '75% Width and 20% Height',
anchor: '75% 20%'
},
{
xtype: 'panel',
title: 'Offset -300 Width & -200 Height',
anchor: '-300 -200'
},
{
xtype: 'panel',
title: 'Mixed Offset and Percent',
anchor: '-250 20%'
}
]
});
}});
});
3.3 关注点 a.上述代码中anchor属性有三种写法 一、anchor: ‘75% 20%’ 子元素宽度为容器的75%,高度为20% 二、 anchor: ‘-300 -200’ 子元素距离容器右边距300，底部200 三、anchor: ‘-250 20%’ 混合模式 子元素距离右边250，高度为20% b.xtype用来定义子元素的类型 4.Absolute 绝对布局 Absolute布局继承自anchor,但是absolute是使用标准的x,y来定义子元素的坐标，所以当父容器大小改变时，子元素不会随之变化。
Ext.onReady(function(){
Ext.application({
name: 'absolute',
launch: function () {
Ext.create('Ext.form.Panel', {
title: 'Absolute Layout',
width: 300,
height: 275,
x:400,
y:100,
layout: {
type: 'absolute'
},
url:'save-form.php',
defaultType: 'textfield',
items: [{
x: 10,
y: 10,
xtype:'label',
text: 'Send To:'
},{
x: 80,
y: 10,
name: 'to',
},{
x: 10,
y: 40,
xtype:'label',
text: 'Subject:'
},{
x: 80,
y: 40,
name: 'subject',
},{
x:0,
y: 80,
xtype: 'textareafield',
name: 'msg',
}],
renderTo: Ext.getBody()
});
}});
});
4.3 关注点a.上面代码的预览中，如果改变父容器的大小，子元素不会随着变化，但有时我们既想使用坐标来定位，又希望子元素随容器变化，这时可以使用anchor属性，你可以去掉代码中的相关注释试试看。由于absolute是继承自anchor的，所有可以使用该属性。 5.Card 卡片布局card管理多个子组件, 每个都完全填满父容器, 而每次仅显示一个. 此布局样式多用于向导, 实现标签页布局等等 5.2 代码demo Ext.onReady(function(){
Ext.application({
name: 'card',
launch: function () {
var navigate = function (panel, direction) {
var layout = panel.getLayout();
layout[direction]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
};
Ext.create('Ext.panel.Panel', {
title: 'Card布局示例',
width: 300,
height: 202,
layout: 'card',
activeItem: 0,
x: 30,
y: 60,
bodyStyle: 'padding:15px',
defaults: { border: false },
bbar: [{
id: 'move-prev',
text: '上一步',
handler: function (btn) {
navigate(btn.up("panel"), "prev");
},
disabled: true
},
'->',
{
id: 'move-next',
text: '下一步',
handler: function (btn) {
navigate(btn.up("panel"), "next");
}
}],
items: [{
id: 'card-0',
html: '第一步'
},
{
id: 'card-1',
html: '第二步'
},
{
id: 'card-2',
html: '最后一步'
}],
renderTo: Ext.getBody()
});
}
});
});
6.Fit能使当容器只包含一个子元素时, 子元素自动填满容器
6.2 代码demo Ext.onReady(function(){
Ext.application({
name:"fit",
launch:function(){
Ext.create('Ext.panel.Panel', {
title: 'Fit Layout',
width: 300,
height: 150,
layout:'fit',
items: [{
title: 'Inner Panel',
html: 'This is the inner panel content',
bodyPadding: 20,
border: false
}],
renderTo: Ext.getBody()
});
}
});
});
6.3关注点a.如果你想要使用fit实现布局，就应该只给其一个子元素 7.form 表单布局这个布局会将表单中所有的输入框纵向的依次的排列, 且宽度与容器宽度相等.
Ext.onReady(function(){
Ext.application({
name:"form",
launch:function(){
Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "FormLayout Panel",
layout: 'form',
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, {
fieldLabel: 'DOB',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue:
|
注册
登录
