《ExtJS2.0实用简明教程》连载（2/30）——Border区域布局

《ExtJS2.0实用简明教程》连载（2/30）——Border区域布局<o:p></o:p> <o:p> </o:p>   　　　　作者：小雨    发表时间：2008-02-17 <o:p>上一篇：</o:p>Accordion布局 下一篇：Card布局 <o:p> </o:p>  <o:p></o:p>   Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：<o:p></o:p> Ext.onReady(function(){ <o:p></o:p> <o:p> </o:p> new Ext.Viewport({<o:p></o:p> <o:p> </o:p> layout:"border",<o:p></o:p> <o:p> </o:p> items:[{region:"north",<o:p></o:p> <o:p> </o:p> height:50,<o:p></o:p> <o:p> </o:p> title:"顶部面板"},<o:p></o:p> <o:p> </o:p> {region:"south",<o:p></o:p> <o:p> </o:p> height:50,<o:p></o:p> <o:p> </o:p> title:"底部面板"},<o:p></o:p> <o:p> </o:p> {region:"center",<o:p></o:p> <o:p> </o:p> title:"中央面板"},<o:p></o:p> <o:p> </o:p> {region:"west",<o:p></o:p> <o:p> </o:p> width:100,<o:p></o:p> <o:p> </o:p> title:"左边面板"},<o:p></o:p> <o:p> </o:p> {region:"east",<o:p></o:p> <o:p> </o:p> width:100,<o:p></o:p> <o:p> </o:p> title:"右边面板"}<o:p></o:p> <o:p> </o:p> ]<o:p></o:p> <o:p> </o:p> }); <o:p></o:p> <o:p> </o:p> });<o:p></o:p>     执行上面的代码将会在页面中输出包含上下左右中五个区域的面板，如下图所示： <o:p></o:p> （版权声明：本文版权归EasyJF开源社区的冷雨所有，受法律保护，可以在互联网上进行转载，转载必须保留作者版权声明及链接；未经本人书面许可，不得把本人Blog上的文章用于出版、发行或其它商业用途。）<o:p></o:p>  <o:p>上一篇：</o:p>Accordion布局 下一篇：Card布局

<o:p> </o:p>