一个简单的viewport
测试了一下Viewport,共享!
--ExtJS部分 -------------------------------
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout : 'border',
items : [{region : 'north',
height : 80,
contentEl : 'northDiv',
bodyStyle : 'background-color: #94A5D6;'
},{
region : 'south',
height : 45,
contentEl : 'southDiv',
bodyStyle : 'background-color: #94A5D6;'
},{
title : '功能菜单',
collapsible : true,
collapseMode : 'mini',
region : 'west',
width : 150,
split : true,
minWidth : 80,
maxWidth : 200,
html : 'west'
},{
region : 'center',
html : 'center'
}]
});
});
--html部分 -------------------------------
<div id="northDiv" style="margin:20px;">这里是north</div>
<div id="southDiv">@2010 copyright:Kangna129</div>
--预览图片请参见附件 -------------------------------
--总结 -------------------------------
类Ext.ViewPort 可称称做为浏览器可视窗。视窗渲染在document的body标签上,并且根据浏览器可视区域的大小自动调整并且管理窗口的大小变化。一个页面上只允许存在一个viewport 。所有的Panel面板增加到viewport,通过她的items ,或者通过她的子面板(子面板也都可以拥有自己的layout)的items,子面板的add 方法,这种设计让内部布局的优势非常明显。
1、它如果没有写布局方式,则按照书写的顺序,依次以一列的形式出现;
2、它如果是以border布局,则必须要有region:'center'部分,不然将会报错:
firefox ---> uncaught exception: No center region defined in BorderLayout ext-comp-1001;
ie ---> "例外被抛出且未被接住" 字样;
3、可以使用frame: true ,为各部分添加默认的背景色(蓝);
4、它最简单的形式就是只写上各部分的region与title或html ,查看效果;
5、根据需要,可嵌套各组件到其中。