您的位置：首页 > Web前端 > JavaScript

Ext JS 深入浅出---布局（BorderLayout）

2018-06-19 14:15 267 查看

1、准备工作

按照

Ext JS 深入浅出树形结构（上）

中部署项目环境.

2、实例实现

新建HTML 页面，BorderLayout.html ,编辑代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" />
<link href="Ext/example.css" rel="stylesheet" />
<script src="Ext/ext-all.js"></script>
<script src="Ext/ext-lang-zh_CN.js"></script>
</head>
<body>
<script>
var viewport = new Ext.Viewport({
layout: 'border',//表示使用BorderLayout的布局方式，边界布局，页面分成东西南北中5部分
items: [{
region: 'north',//指定组建具体位置，上方
height: 40,
html:'<h1>顶栏</h1>'
}, {
region: 'west',//左方
width: 80,
html: '<p>菜单1</p><p>菜单2</p>'
}, {
region: 'center',
html: '显示内容'
}]
});
</script>
</body>
</html>

运行页面，结果如下所示：

他将整个布局区域分成东西南北中 5个部分。除了中间区域以外，其他区域都是可以省略的。

3、完整的布局

编辑 BorderLayout.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" />
<link href="Ext/example.css" rel="stylesheet" />
<script src="Ext/ext-all.js"></script>
<script src="Ext/ext-lang-zh_CN.js"></script>
</head>
<body>
<script>
var viewport = new Ext.Viewport({
layout: 'border',//表示使用BorderLayout的布局方式，边界布局，页面分成东西南北中5部分
items: [
{ region: 'north', html: 'north' },
{ region: 'south', html: 'south' },
{ region: 'east', html: 'east' },
{ region: 'west', html: 'west' },
{ region: 'center', html: 'center' }
]
});
</script>
</body>
</html>

运行页面，效果如下所示：

4、设置子区域的大小

这里的子区域就是 north、south、east、west这4个区域，不包括中间的 center ，中间区域大小是通过其他4个区域计算得出。通过添加width 和 height 参数就能指定每个区域大小。编辑代码如下：

<script>
var viewport = new Ext.Viewport({
layout: 'border',//表示使用BorderLayout的布局方式，边界布局，页面分成东西南北中5部分
items: [
{ region: 'north', html: 'north',height:120 },
{ region: 'south', html: 'south', height: 30 },
{ region: 'east', html: 'east',width:40 },
{ region: 'west', html: 'west', width: 100 },
{ region: 'center', html: 'center' }
]
});
</script>

运行后结果如下所示：

显然，north 和 south 只能制定高度，east 和 west 只能指定宽度值。

5、使用split 并限制他的范围

当然，我们可以使用split 参数，用户自行拖放来改变某一个区域的大小。编辑代码如下：

<script>
var viewport = new Ext.Viewport({
layout: 'border',//表示使用BorderLayout的布局方式，边界布局，页面分成东西南北中5部分
items: [
{ region: 'north', html: 'north',},
{ region: 'west', html: 'west', width: 100,split:true},
{ region: 'center', html: 'center' }
]
});
</script>

运行结果如下所示：

我们发现，west 和 center 之间的边界线变宽了，可以通过鼠标移动这个边界。随之改变区域大小。同理我们也很容易想到给边界设置最大值，避免用户过度拖放边界。代码如下：

<script>
var viewport = new Ext.Viewport({
layout: 'border',//表示使用BorderLayout的布局方式，边界布局，页面分成东西南北中5部分
items: [
{ region: 'north', html: 'north',},
{ region: 'west', html: 'west', width: 100,split:true,minSize:80,maxSize:120},
{ region: 'center', html: 'center' }
]
});

运行后结果如下：

6、子区域的展开与折叠

子区域的展开与折叠其实相当于隐藏功能，实现这个功能只需要配置几个参数就可以，编辑代码如下：

<script>
var viewport = new Ext.Viewport({
layout: 'border',//表示使用BorderLayout的布局方式，边界布局，页面分成东西南北中5部分
items: [
{ region: 'north', html: 'north',},
{ region: 'west', html: 'west',title:'west', width: 100,collapsible:true},
{ region: 'center', html: 'center' }
]
});
</script>

运行结果如下主要的参数是 collapsible:true ，这个参数激活west 区域的折叠功能，而 title 参数也是必须设置的，折叠时显示该标题。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航