Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。


        Border布局由类Ext.layout.BorderLayout定义，布局名称为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:"右边面板"}  ]  });   });

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