EXT选项面板TabPanel

在前面的示例中，为了显示一个面板，我们需要在页面上添加一个，然后把Ext 控件
渲染到这个div 上。VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，
并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。看下面
的代码：

Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[{title:"面板",
html:"",
bbar:[{text:"按钮1"},
{text:"按钮2"}]
}]
});
});

Viewport 不需要再指定renderTo，而我们也看到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,
collapsible:true,
html:"菜单栏"
},
{
xtype:"tabpanel",
region:"center",items:[{title:"面板1"},
{title:"面板2"}]
}
]
});
});