ExtJs之选项面板(TabPanel)

Viewport不需要再指定renderTo就可以看到Viewport填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改变

Ext.onReady(function(){

  new Ext.Viewport({
  enableTabScroll:true,
  layout:"fit",
  items:[{
   title:"面板",
   html:"",
   bbar:[{
   text:"按钮1"
   },{
   text:"按钮2"}]
  }]
  });
 });
Viewport代表整个浏览器显示的区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面只能有一个Viewport。
运行结果：
 



Viewport主要用于应用程序的主界面，可以通过使用不同的布局来搭建不同风格的应用程序主界面，在Viewport上常用布局有fit、border等，看下如下代码：
Ext.onReady(function(){
  new Ext.Viewport({
  enableTabScroll:true,
  layout:"border",
  items:[
  {
   title:"面板",
   region:"north",
   height:50,
   html:"<h1>网站后台管理系统</h1>" 
   },
   {
   title:"菜单",
   region:"west",
   width:200,
   collapsinle:true,
   html:"菜单栏"
   },
   {
   xtype:"tabpanel",
   region:"center",
   items:[{title:"面板1"},{title:"面板2"}]
   }]
  });
 });
运行结果：