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"}]
}]
});
});
运行结果: