葡京娱乐官网下载安装:ExtJs4 笔记（14） layout 布局BR一、absolute
本篇解说Ext另一个紧张的观点：结构。一样平常的容器类控件都是经由过程设置设置设备摆设摆设项items添加子控件的，这些子控件相对付父控件怎么定位呢，这里就要用到结构。某些容器类控件，它本身默认就集成了一种结构要领，例如对照范例的是：Ext.container.Viewport 结构控件，它着实便是一个border结构的容器，还有Ext.form.Panel、Ext.tab.Panel等。本节我们系统的阐发各类结构要领。
一、absolute
这种要领的结构可以对子元素相对付父级容器控件进行绝对定位，它包孕了x、y两个设置设置设备摆设摆设项用于定位。
我们来看看一个例子：
[Js]
//absolute
Ext.create(葡京娱乐官网下载安装'Ext.Panel', {
title: '容器面板',
renderTo: 'div1',
width: 400,
height: 300,
layout: 'absolute',
items: [{
title: '面板1',
xtype: "panel",
html: "子元素1",
width: 200,
height: 100,
x: 50,
y: 50
}, {
title: '面板2',
xtype: "panel",
html: "子元素2",
width: 200,
height: 100,
x: 100,
y: 80
}]
});
二、accordion
有的js插件里面accordion都是一个ui控件，然则Ext是经由过程结构的要领实现的，我们可以用面板控件作为它的折叠项葡京娱乐官网下载安装，并且还可以用js来翻动活动项。
[Js]
//accordion
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div2',
width: 400,
height: 300,
layout: 'accordion',
items: [{
tools: [{ type: 'gear', handler: function () {
Ext.Msg.alert('提示', '设置设置设备葡京娱乐官网下载安装摆设摆设按钮被点击。');
}
}, { type: 'refresh'}],
title: '面板1',
xtype: "panel",
html: "子元素1"
}, {
title: '面板2',
xtype: "panel",
html: "子元素2"
}, {
id: 'panel3',
title: '面板3',
xtype: "panel",
html: "子元素3"
}]
});
Ext.create("Ext.Button", {
renderTo: 'div2',
text: "打开第三页",
handler: function () {
Ext.getCmp('panel3').expand(true);
}
});
三、anchor
这个结构便是表单面板默认支持的，每一项盘踞一行，支持用anchor设置设置设备摆设摆设项分配各个子项的高度和宽度。为百分比时表示当前大年夜小占父容器的百分比，为数字的时一样平常为负数，表示父容器的值减去差值，剩下的为子项的大年夜小。
[Js]
//anchor
Ext.create('Ext.Panel', {
title: '容器面葡京娱乐官网下载安装板',
renderTo: 'div3',
width: 400,
height: 300,
layout: 'anchor',
items: [{
tools: [{ type: 'gear', handler: function () {
Ext.Msg.alert('提示', '设置设置设备摆设摆设按钮被点击。');
}
}, { type: 'refresh'}],
title: '面板1',
xtype: "panel",
html: "子元素1",
anchor: '80% 20%'
}, {
title: '面板2',
xtype: "panel",
html: "子元素2",
anchor: '-50 -200'
}, {
title: '面板3',
xtype: "panel",
html: "子元素3",
anchor: '100% 30%'
}]
});
四、border
这个结构可以定义东南西北四个偏向的子元素，还有一个居中的子元素，一样平常用它来做页面整页结构，以是Ext.container.Viewport默认就支持了这个结构要领。
[Js]
//border
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div4',
width: 400,
height: 300,
layout: 'border',
defaults: {
split: true,//是否有瓜分线
collapsible: true,//是否可以折叠
bodyStyle: 'padding:15px'
},
items: [{
region: 'north',//子元素的方位：north、west、east、center、south
title: '北',
xtype: "panel",
html: "子元素1",
height: 70
}, {
region: 'west',
title: '西',
xtype: "panel",
html: "子元素2",
width: 100
}, {
region: 'east',
title: '东',
xtype: "panel",
html: "子元素2",
width: 100
}, {
region: 'center',
title: '主体',
xtype: "panel",
html: "子元素3"
}, {
region: 'south',
title: '南',
xtype: "panel",
html: "子元素4",
height: 70
}]
});
五、card
这个结构可以像卡片一样的切换每个子元素，各个子元素都邑独有父元素的容器空间。我们可以定义翻页按钮来节制当前处于活动状态的子元素。
[Js]
//card
var cardNav = function (incr) {
var l = Ext.getCmp('cardPanel').getLayout();
var i = l.activeItem.id.split('card')[1];
var next = parseInt(i, 10) + incr;
l.setActiveItem(next);
Ext.getCmp('cardPrev').setDisabled(next === 0);
Ext.getCmp('cardNext').setDisabled(next === 2);
};
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div5',
width: 400,
height: 300,
layout: 'card',
activeItem: 1,//默认活动项
id: 'cardPanel',
items: [{
id: 'card0',
title: '面板1',
xtype: "panel",
html: "子元素1"
}, {
id: 'card1',
title: '面板2',
xtype: "panel",
html: "子元素2"
}, {
id: 'card2',
title: '面板3',
xtype: "panel",
html: "子元素3"
}],
bba葡京娱乐官网下载安装r: ['->', {
id: 'cardPrev',
text: '« 前一页',
handler: Ext.Function.bind(cardNav, this, [-1])
}, {
id: 'cardNext',
text: '后一页 »',
handler: Ext.Function.bind(cardNav, this, [1])
}]
});
六、column
这个结构把子元素按照列进行划分。
[Js]
//column
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'div6',
width: 400,
height: 300,
layout: 'column',
defaults: {//设置没一列的子元素的默认设置设置设备摆设摆设
layout: 'anchor',
defaults: {
anchor: '100%'
}
},
items: [{
columnWidth: 4 / 10,//设置列的宽度
items: [{
title: '面板1',
border: false,
html: '子元素1'
}, {
title: '面板2',
border: false,
html: '子元素2'
}]
}, {
width: 120,
items: [{
title: '面板3',
border: false,
html: '子元素3'
}]
}, {
columnWidth: .40,
items: [{
title: '面板4',
border: false,
html: '子元素4'
}]
}]
});