ExtJS 2.0实用简明教程 之Border区域布局

该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：

Ext.onReady(function(){ 
new Ext.Viewport({ 
layout:"border", 
items:[{region:"north", 
height:50, 
title:"顶部面板"}, 
{region:"south", 
height:50, 
title:"底部面板"}, 
{region:"center", 
title:"中央面板"}, 
{region:"west", 
width:100, 
title:"左边面板"}, 
{region:"east", 
width:100, 
title:"右边面板"} 
] 
}); 
}); 

执行上面的代码将会在页面中输出包含上下左右中五个区域的面板，如下图所示：

ExtJS 2.0实用简明教程 之Ext类库简介
ExtJS的类库由以下几部分组成：底层API(core)：底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层

ExtJS 2.0实用简明教程 之ExtJS版的Hello
htmlxmlns="http://www.w3.org/1999/xhtml"headmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/titleExtJS/titlelinkrel="stylesheet"type="text/css"href="extjs/resources/css/ext-all.css"/scr

ExtJS 2.0 实用简明教程之布局概述
ExtJS的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布