介绍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下不会报错
}
怎么样？不错吧，是不是已经爱上ext了，下一章还有更精彩的介绍~~
分享到：
相关推荐
Border布局是ExtJS中一种非常实用的布局方式，它能够将容器空间分割成五个区域，分别是上、下、左、右和中间五个部分。这种布局方式非常灵活，适用于需要展示多个子面板的应用场景。 在ExtJS 2.0中，Border布局由类...
在ExtJS框架中，`border`布局是一种非常常见的布局方式，它将容器划分为五个区域：north（北）、south（南）、east（东）、west（西）以及center（中心）。通过这种布局方式可以非常方便地构建出类似传统网页中的...
7)Border区域布局 8)ExtJS的组件 9)Column列布局 10)组件的使用 11)Fit布局 12)Form布局 13)组件的配置属性 14)Accordion布局 15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板...
本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍： Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域，并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...
#### 6.2 Border区域布局 Border布局将容器分为五个区域：上(top)、下(bottom)、左(left)、右(right)和中心(center)。每个区域都可以放置一个或多个组件。 #### 6.3 Column列布局 Column布局主要用于创建响应式...
- **Border区域布局**: 将容器划分为多个区域（顶部、底部、左侧、右侧和中心）。 - **Column列布局**: 按列排列组件。 - **Fit布局**: 使子组件填充其父容器的全部空间。 - **Form布局**: 专为表单设计，自动...
外一篇 用javascript改变onclick调用的函数 用JavaScript加密保护...Border区域布局 《ExtJS2.0实用简明教程》之Ext类库简介 《ExtJS2.0实用简明教程》之布局概述 《ExtJS2.0实用简明教程》之获得ExtJS...
其中Border布局是一种特殊的布局方式，它能够将容器划分为五个区域：顶部（North）、底部（South）、左侧（West）、右侧（East）以及中间（Center），以便于将不同的组件放置在这些区域中。接下来将详细阐述Border...
Border Layout是EXT中的一种预定义布局，顾名思义，它将容器划分为五个区域：north, south, east, west 和 center。这些区域按照它们的名字分布在屏幕的相应位置，中心区域通常占据剩余的空间。这种布局方式常用于...
Border布局是一种复杂的多区域布局，常用于构建类似框架的应用UI。它分为五个区域：东（east）、西（west）、南（south）、北（north）和中心（center）。每个区域都有特定的职责，例如，中心区域会自动填充其他区域...
Border布局是其中的一种，它模仿了经典的桌面应用布局，将容器划分为北（North）、南（South）、东（East）、西（West）和中心（Center）五个区域。每个区域可以包含一个或多个组件，根据需要自定义大小和内容。 - ...
每个HTML元素都有一个内容区域、内边距（padding）、边框（border）和外边距（margin）。不同浏览器对盒模型的解释可能略有差异，确保使用统一的盒模型设置（例如，使用`box-sizing: border-box;`）可避免潜在问题。...
3. **盒模型**：理解CSS布局的基础是盒模型，每个HTML元素都可视为一个矩形的盒子，包含边距（margin）、边框（border）、填充（padding）和内容区域。盒模型决定了元素占据的空间及其与其他元素的关系。 4. **定位...
总结起来，这个表单布局实例展示了如何在ExtJS中使用`border`布局创建复杂的多区域界面，以及如何利用`FormPanel`和`column`布局来构建表单。通过组合这些布局技术，开发者可以创建出适应性强、易于使用的用户界面，...
文件`grail_border_layout3.html`、`grail_border_layout2.html`可能涉及一种名为“Grail Border Layout”的布局模式，它是一种经典的等高布局技巧，用于创建具有左侧栏、右侧栏和主要内容区域的页面，其中两侧栏和...