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:"

网站后台管理系统!

" }, {title:"菜单", region:"west", width:200, collapsible:true, html:"菜单栏" }, { xtype:"tabpanel", region:"center",items:[{title:"面板1"}, {title:"面板2"}] } ] }); });

你可能感兴趣的:(ext)