7、Ext中的布局应用
快速编写demo
创建layout.html
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<link type="text/css" rel="stylesheet"
href="ext-3.4.1/resources/css/ext-all.css">link>
<script src="ext-3.4.1/adapter/ext/ext-base.js">script>
<script src="ext-3.4.1/ext-all.js">script>
<script src="layout.js">script>
head>
<body>
<div id="d1">div>
<div id="d2">div>
body>
html>创建layout.js
// 创建Column布局
function createColumnPanel1() {
var panel = new Ext.Panel({
width : 600,
height : 400,
title : "父面板",
layout : "column",
items : [{
title : "面板1",
// html:"asdasd",
columnWidth : 0.5,
height : 180,
layout : "column",
items : [{
title : "子面板1"
}, {
title : "子面板2"
}]
}, {
title : "面板2",
html : "asdasd",
columnWidth : 0.5,
height : 50
}/*
* ,{ title : "面板3", html:"asdasd", width:50, height :
* 50 },{ title : "面板4", html:"asdasd", columnWidth :
* 0.25, height : 50 }
*/]
});
panel.render("d1");
}
// 创建Border布局
function createBorderLayoutPanel() {
var panel = new Ext.Panel({
width : 600,
height : 500,
title : "父面板",
layout : "border",
items : [{
title : "西(左)",
region : "west",
//split配置项为true时，panel可以拉伸
split : true,
//collapsible为true时，panel有个按钮可以收缩和展开
collapsible : true,
width : 150
}, {
title : "南（底）",
region : "south",
height : 100
}, {
title : "东（右）",
region : "east",
width : 100
}, {
title : "北边（顶）",
region : "north",
height : 100
}, {
title : "中间（主区域）",
region : "center",
layout : "border",
items : [{
title : "子面板1",
region : "west",
width : "50%",
split : true
}, {
title : "子面板2",
region : "center"
}]
}]
});
panel.render("d1");
}
// 创建Fit布局
function createFitLayoutPanel() {
var panel = new Ext.Panel({
width : 600,
height : 500,
title : "父面板",
layout : "fit",
items : [{
title : "西(左)",
width : 150
}, {
title : "南（底）",
height : 100
}]
});
panel.render("d1");
}
// 创建Accordion布局
function createAccordionLayoutPanel() {
var panel = new Ext.Panel({
width : 600,
height : 500,
title : "父面板",
layout : "accordion",
items : [{
title : "西(左)",
items : [{
title : "子面板1"
}, {
title : "子面板2"
}, {
title : "子面板3"
}]
}, {
title : "南（底）",
items : [{
title : "子面板1"
}, {
title : "子面板2"
}, {
title : "子面板3"
}]
}]
});
panel.render("d1");
}
// 创建Anchor布局
function createAnchorLayoutPanel() {
var panel = new Ext.Panel({
width : 600,
height : 500,
title : "父面板",
layout : "anchor",
items : [{
title : "西(左)",
anchor : "50% 30%",
html : "面板1"
}, {
title : "南（底）",
html : "面板2"
}]
});
panel.render("d1");
}
Ext.onReady(function() {
//需要什么布局，替换下面的方法就行了
createAnchorLayoutPanel();
});执行效果如下：
- Column布局
- Border布局
- Fit布局
- Accordion布局
- Anchor布局
知识点解析
layout: String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。
ColumnLayout
columnWidth
columnWidth。可采用width（像素）或columnWidth（百分比）的方式来决定面板的尺寸大小，如不为面板指定width或columnWidth，那么将缺省为面板的自动宽度。width的配置项和columnWidth的配置项两者都可以混合使用，但columnWidth的值加起来就一定要是1。
BorderLayout
BorderLayout具有固定性，渲染之后就不会任意变动或改变格局。中央区域（center
region）在BorderLayout设定中不可或缺。假使没有其它的区域，中央布局便会就是该布局的全部区域。布局东南西北中需要用到region：String配置项，属性值分别是：west、east、north、south。
FitLayout
FitLayout没有直接的配置选项（不同于继承），要采用FitLayout填充容器的面板，只需设置容器的layout:’fit’和加入一个面板。即使容器指定了多个面板，只会渲染第一个面板。
FitLayout
此layout包含了多个像卡片垂直方向堆栈的面板。在某一时间，只有一个卡片（面板）是可见的。每个面板都支持内建的展开和闭合功能。
AnchorLayout
这是一种相对于容器四周的尺寸大小，对其包含在内的元素进行定位式（Anchoring）的布局。如果容器大小发生变化，所有已固定的项都会随着定位规则而变化（按照规则自动渲染）。