介绍border布局的使用方法，通常用于布局页面总体框架，作为系统总提界面的首选，可嵌套多种布局，具体请参见实例分析部分。 在介绍border布局之前，还是让我先简单介绍下ext的布局概念，先来看下面这张图：
![图片]()
什么？你不认识这些英文，别告诉我你上过英语课啊。在ext里，浏览器被分成东西南北中五个区域（别想到麻将啊-_-||），我们可以在这五个区域里对整个系统主界面进行布局，布局好的界面自动填充整个屏幕，当然，它是兼容多数浏览器的。（伟大的jack真实太厉害了~）。在实际运用中，当然不是必须要填充满这五个区域，我们可以根据自己的需要进行选择，例如看本站主界面：
我们可以发现，在这个应用中，我只没有用east区域，在我看来，这也是一种比较流行的布局方式:-)。了解了布局的概念后，先来看以下的代码来看看ext是怎么实现布局的，当然，这一节先主要介绍border布局。看以下代码：
- 代码:
Ext.onReady(function(){ //每一个ext的应用都必须放在Ext.onReady()里，表示当ext完全加载后执行定义的方法
new Ext.Viewport({ //实例化布局对象
layout:'border', //声明为border布局
items:[{ //布局项目
region:'north',//表示为north区域
height:50, //区域高度
title:'顶部面板' //区域标题
},{
region:'south',
height:50,
title:'底部面板'
},{
region:'center',
title:'中央面板'
},{
region:'west',
width:100,
title:'左边面板'
},{
region:'east',
width:100,
title:'右边面板'
}]
});
});
拷贝这些代码，直接保存运行后，将出现如下所示页面：
什么？你说上和下的布局用边框的太难看，我网站首页的上下布局是怎么弄的？将north和south的布局区域代码更改一下，最后整理成以下代码：
- 代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extDemo</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',//填充指定id的区域内容到north区域，若不设该属性，请通过html:'内容'，设置区域内容
height:35
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25
}),{
region:'center',
title:'中央面板'
},{
region:'west',
width:100,
title:'左边面板'
},{
region:'east',
width:100,
title:'右边面板'
}]
});
});
</script>
<div id="north">
顶部
</div>
<div id="south">
底部
</div>
</body>
</html>
Look一下^_^
强大吧，当然要做到灵活运用，你必须学会看ext的API文档，里面有详细说明。值得提醒的是，大家写这些代码的时候一定要记得良好缩进，结合ff 的firebug或ie调试，出错debug会方便很多，不然代码嵌套一多，想砸电脑的冲动都有了。另外一个细节就是，如果遇到ff下没问题，ie不能执行，很有可能是你item里的项目属性，在最后一个属性后加了逗号造成的。例如：
- 代码:
//正确写法
{
region:'center',
title:'中央面板'
}
//错误写法
{
region:'center',
title:'中央面板', //多余的逗号,ff下不会报错
}
浙公网安备 33010602011771号