ExtJS2.0实用简明教程——选项面板TabPanel
2008-02-23 19:29
211 查看
在前面的示例中,为了显示一个面板,我们需要在页面上添加一个,然后把 Ext控件渲染到这个div上。VeiwPort代表整个浏览器显示区域,该对象渲染到页面的body区域,并会随着浏览器显示区域的大小自动改变,一个 页面中只能有一个ViewPort实例。看下面的代码:
运行上面的代码会得到如图xxx所示的输出结果。
![](http://www.easyjf.com/blog/lengyu/extjs/image043.jpg)
Viewport不需要再指定renderTo,而我们也看到Viewport确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改改。
Viewport主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等,当然在需要的时候其它布局也会常用。看下面的代码:
运行上面的程序会得如图xx所示的效果。
Ext.onReady(function(){ new Ext.Viewport({ enableTabScroll:true, layout:"fit", items:[{title:"面板", html:"", bbar:[{text:"按钮1"}, {text:"按钮2"}] }] }); });
运行上面的代码会得到如图xxx所示的输出结果。
![](http://www.easyjf.com/blog/lengyu/extjs/image043.jpg)
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"}] } ] }); });
运行上面的程序会得如图xx所示的效果。
![](http://www.easyjf.com/blog/lengyu/extjs/image045.jpg)
相关文章推荐
- ExtJS2.0实用简明教程——组件的配置属性
- ExtJS2.0实用简明教程——可编辑表格EditorGridPanel
- ExtJs之选项面板(TabPanel)
- ExtJS2.0实用简明教程——Panel
- ExtJS2.0实用简明教程 - 应用ExtJS
- ExtJS2.0实用简明教程 - Fit布局
- ExtJS2.0实用简明教程——视图区ViewPort
- ExtJS2.0实用简明教程 - Form布局
- ExtJS2.0实用简明教程 - ExtJS版的Hello
- DOXYGEN简明实用教程
- DOXYGEN简明实用教程
- ExtJS学习笔记(六) 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- Sencha Touch 2 快速入门系列(四)-- 组件之标签面板(TabPanel)
- Ext_标签面板_Ext.TabPanel
- WPF教程二:布局之StackPanel面板
- DOXYGEN简明实用教程
- 【秒懂】号称最为简明实用的Django上手教程(下)
- senchatouch tabPanel 在面板跳转时执行自定义函数 handler()
- ExtJS2.0实用简明教程——组件的使用
- ExtJS2.0实用简明教程——对话框