该布局将容器分为五个区域，分别由东、南、西、北、中心表示。向容器中添加子元素时，我们只需要指定这些子元素的位置，Border布局会自动将子元素放在布局指定的位置。看看下面的代码：复制代码如下： ext . onready(function(){ new ext . viewport({ layout : ' border '，items: [{region:' north '，height 336050，Title:' Top Panel'}，{Region :' South '，Height :50，Title : ' Bottom，{ Region : ' Center '，Title 33333666: '左面板' }，{区域： '东'，宽度：100，标题： '右面板' }]})；});执行上面的代码将在页面中输出一个包含五个区域的面板，如下图所示：。