ExtJS2.0实用简明教程——Border区域布局

最新推荐文章于 2019-06-27 00:20:20 发布

转载最新推荐文章于 2019-06-27 00:20:20 发布 · 756 阅读

文章标签：

#border #extjs #function #layout

EXT2 专栏收录该内容

54 篇文章

订阅专栏

本文介绍了Ext布局中的Border布局，它将容器划分为东南西北中五个区域，并通过实例代码展示了如何使用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:"右边面板"}

]

}); 

});

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