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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > ExtJS 2.0实用简明教程之Border区域布局

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 147 ::

收藏到网摘: n/a

ie 调试javascript的工具 ExtJS 2.0实用简明教程之Ext类库简介

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:"右边面板"} 
] 
}); 
}); 

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

ie 调试javascript的工具 ExtJS 2.0实用简明教程之Ext类库简介

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

评论 (0) All

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