Ext.Viewport 主菜單

Ext.Viewport代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸。
 在一个页面中只允许出现一个Viewport实例，没有提供对滚动条的支持。

Js代码  

1. Ext.onReady( function (){  
2.     var  accordion =  new  Ext.Panel({  
3.         title: "功能分组" ,  
4.         layout: "accordion" ,  
5.         layoutConfig: {  
6.             animate: true   
7.         },  
8.         width: 250,  
9.         minWidth: 100,  
10.         region: "west" ,  
11.         split: false ,  
12.         collapsible: true ,  
13.         items: [  
14.             {title:"嵌套面板一" , html: "嵌套面板一" , iconCls: "save" },  
15.             {title:"嵌套面板二" , html: "嵌套面板二" , iconCls: "search" },  
16.             {title:"嵌套面板三" , html: "嵌套面板三" , iconCls: "back" }  
17.         ]  
18.     });  
19.       
20.     new  Ext.Viewport({  
21.         title: "Viewport" ,  
22.         layout: "border" ,  
23.         defaults: {  
24.             bodyStyle: "background-color: #FFFFFF;" ,  
25.             frame: true   
26.         },  
27.         items: [  
28.             accordion,  
29.             {region:"north" , height:100},  
30.             {region:"center" }  
31.         ]  
32.     });  
33. });