一个简单的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、根据需要，可嵌套各组件到其中。