《ExtJS2.0实用简明教程》之Border区域布局
来源:互联网 发布:小米的网络设置在哪里 编辑:程序博客网 时间:2024/05/24 06:56
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:"右边面板"}
]
});
});
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:"右边面板"}
]
});
});
执行上面的代码将会在页面中输出包含上下左右中五个区域的面板,如下图所示:
- 《ExtJS2.0实用简明教程》之Border区域布局
- ExtJS2.0实用简明教程——Border区域布局
- 《ExtJS2.0实用简明教程》之布局概述
- ExtJs2.0学习系列(4)--区域布局之border布局
- ExtJS2.0实用简明教程
- ExtJS2.0实用简明教程
- ExtJS2.0实用简明教程
- ExtJS2.0实用简明教程——布局概述
- ExtJS2.0实用简明教程——Column列布局
- ExtJS2.0实用简明教程——Fit布局
- ExtJS2.0实用简明教程——Form布局
- ExtJS2.0实用简明教程——Accordion布局
- ExtJS2.0实用简明教程——Card布局
- 《ExtJS2.0实用简明教程》之获得ExtJS
- 《ExtJS2.0实用简明教程》之应用ExtJS
- 《ExtJS2.0实用简明教程》之ExtJS版的Hello
- 《ExtJS2.0实用简明教程》之Ext类库简介
- 《ExtJS2.0实用简明教程》之ExtJS简介
- [转帖]一个LDAP应用的例子,在Sun ONE Directory Server 5.2
- 《ExtJS2.0实用简明教程》之应用ExtJS
- 《ExtJS2.0实用简明教程》之布局概述
- 《ExtJS2.0实用简明教程》之ExtJS版的Hello
- 《ExtJS2.0实用简明教程》之Ext类库简介
- 《ExtJS2.0实用简明教程》之Border区域布局
- 什么是推,拉?
- SQL SERVER 不能连接的完美解决方案
- JNDI
- 吃蔬菜的十大误区
- 改变你人生的32句励志言语
- 在Ubuntu 7.10 中安装飞鸽传书 IpMsg
- Net(C#)实现网页验证码功能
- 用Visual C#.NET编写服务器日期控件