在前面的示例中,为了显示一个面板,我们需要在页面上添加一个,然后把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"}]
}
]
});
});
分享到:
相关推荐
解决Ext中tabPanel关闭后再次打开的2种方式。详情见文件,很小的txt文本。
NULL 博文链接:https://mstr838wind.iteye.com/blog/766860
ext的tabpanel的激活与注意事项,激活的代码实现
treepanel 和 tabpanel 合在一起使用,可直接使用
tapestry4.02中封装ext的TabPanel组件
1、Ext.TabPanel简单使用 代码:
竖向标签TabPanel-------------------------------------------------
EXT的扩展控件,可以实现页签面板的拖动效果
TabPanel的使用,添加tab,加载页面,添加事件
extjs4.2.1 tabPanel刷新及关闭标签
NULL 博文链接:https://icyfire.iteye.com/blog/412574
ExtJs 学习笔记基础篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
ext拖拽示例,可以通过ext生成的layout自动拖拽,效果很不错的
博文链接:https://jfp.iteye.com/blog/178889
19)选项面板TabPanel 20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)Record 28)Store 29)TreePanel基本使用 30)使用树控件...
NULL 博文链接:https://daishuanglong.iteye.com/blog/789697
jquery 做的选项卡,是个网页,可以参考下吧