第七讲：ViewPort和TabPanel.doc

ViewPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。 示例一：显示单个Panel Ext.onReady(function(){ new Ext.Viewport({ title : ViewPort, layout:fit, items: [ { title:panel } ] }); }); 示例二：使用Accordion布局。 Ext.onReady(function(){ new Ext.Viewport({ title : ViewPort, layout:accordion, items: [ { title:panel1, html:panel1文本内容 }, { title:panel2, html:panel2文本内容 } ] }); });border布局。 Ext.onReady(function(){ new Ext.Viewport({ title : ViewPort, layout:border,//表格布局 items: [ { title: north Panel, html : 上边, region: north,//指定子面板所在区域为north height: 100 },{ title: West Panel, html : 左边, region:west,//指定子面板所在区域为west width: 150 },{ title: Main Content, html : 中间, region:center//指定子面板所在区域为center }] }); }); Ext.onReady(function(){ var tabPanel = new Ext.TabPanel({ height : 150, width : 300, activeTab : 0,//默认激活第一个tab页 animScroll : true,//使用动画滚动效果 enableTabScroll : true,//tab标签超宽时自动出现滚动按钮 applyTo:hello, items: [ {title: tab标签页1,html : tab标签页1内容}, {title: tab标签页2,html : tab标签页2内容}, {title: tab标签页3,html : tab标签页3内容}, {title: tab标签页4,html : tab标签页4内容}, {title: tab标签页5,html : tab标签页5内容} ] }); });!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head titleTestPanel/title script type=text/javascript src=../Ext/adapter/ext/ext-base.js/script script type=text/javascript src=../Ext/ext-all-debug.js/script script type=text/javascript src=TabPanel4.js/script link rel=stylesheet type=text/css href=../Ext/resources/css/ext-all.css/link /head body div id=hello div class=x-hide-display title=tab标签页1 id=div1tab标签页1内容/div div class=x-hide-display title=tab标签页2 id=div2tab标签页2内容/div div class=x-hide-display title=tab标签页3 id=div3tab标签页3内容/div div class=x-hide-display title=tab