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"}]

   }]

  });

 });

运行结果：