第七讲：ViewPort和TabPanel

骑猪看日落 2022-04-14 06:10 219阅读 0赞

ViewPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。

示例一：显示单个Panel

示例二：使用Accordion布局。

示例三：使用border布局。

选项面板TabPanel。

示例一：

示例二：转换div为选项页

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &nbsp;&nbsp;&lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;TestPanel&lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="../Ext/ext-all-debug.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="TabPanel4.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"&gt;&lt;/link&gt; &nbsp;&nbsp;&lt;/head&gt; &nbsp;&nbsp;&lt;body&gt; &nbsp;&nbsp;&lt;div id="hello"&gt; &nbsp;&nbsp; &lt;div class='x-hide-display' title='tab标签页1' id="div1"&gt;tab标签页1内容&lt;/div&gt; &lt;div class='x-hide-display' title='tab标签页2' id="div2"&gt;tab标签页2内容&lt;/div&gt; &lt;div class='x-hide-display' title='tab标签页3' id="div3"&gt;tab标签页3内容&lt;/div&gt; &lt;div class='x-hide-display' title='tab标签页4' id="div4"&gt;tab标签页4内容&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&lt;div class='x-hide-display' title='tab标签页5' id="div5"&gt;tab标签页5内容&lt;/div&gt; &nbsp;&nbsp;&lt;/body&gt; &lt;/html&gt; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

示例三：自动转换div为选项页

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &nbsp;&nbsp;&lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;TestPanel&lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="../Ext/ext-all-debug.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="TabPanel2.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"&gt;&lt;/link&gt; &nbsp;&nbsp;&lt;/head&gt; &nbsp;&nbsp;&lt;body&gt; &nbsp;&nbsp;&lt;div id="hello"&gt; &nbsp;&nbsp; &lt;div class='x-tab' title='tab标签页1'&gt;tab标签页1内容&lt;/div&gt; &lt;div class='x-tab' title='tab标签页2'&gt;tab标签页2内容&lt;/div&gt; &lt;div class='x-tab' title='tab标签页3'&gt;tab标签页3内容&lt;/div&gt; &lt;div class='x-tab' title='tab标签页4'&gt;tab标签页4内容&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&lt;div class='x-tab' title='tab标签页5'&gt;tab标签页5内容&lt;/div&gt; &nbsp;&nbsp;&lt;/body&gt; &lt;/html&gt; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

示例四：动态添加选项页

示例五：为标签页添加右键菜单

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ var&nbsp;tabPanel = new&nbsp;Ext.TabPanel({ height : 350, width : 400, 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内容'} ], buttons : [ { text : '添加标签页', handler : addTabPage } ],listeners:{ "contextmenu":function(tabPanel,myitem,e){ var&nbsp;menu = new&nbsp;Ext.menu.Menu([ {text:"关闭当前页",handler:function(){tabPanel.remove(myitem)}}, {text:"关闭其他所有页面",handler:function() { tabPanel.items.each(function(item) { if(item != myitem) { tabPanel.remove(item); } }) } }, {text:"打开新页面",handler:addTabPage} ]); menu.showAt(e.getPoint()); } } }); function&nbsp;addTabPage(){ var&nbsp;index = tabPanel.items.length + 1; var&nbsp;tabPage = tabPanel.add({ //动态添加tab页 title: 'tab标签页'+index, html : 'tab标签页'+index+'内容', closable : true//允许关闭 }) tabPanel.setActiveTab(tabPage);//设置当前tab页 } }); </td> 
 </tr> 
 </tbody> 
</table>

ViewPort和TabPanel的综合例子。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ &nbsp; var&nbsp;tabPanel = new&nbsp;Ext.TabPanel({ title: '主面板', region:'center',//指定子面板所在区域为center activeTab : 0,//默认激活第一个tab页 animScroll : true,//使用动画滚动效果 enableTabScroll : true,//tab标签超宽时自动出现滚动按钮 items: [ {title:'欢迎页',html:'欢迎您回到 北风网--国内最大最权威的IT技术网站！'} ] &nbsp; }) &nbsp; new&nbsp;Ext.Viewport({ title : '北风培训平台系统', layout:'border',//表格布局 items: [ { title: '北风培训平台系统', html : '北风培训平台系统', region: 'north',//指定子面板所在区域为north height: 100 },{ title: '菜单栏', region:'west',//指定子面板所在区域为west width: 150, tbar:[ {text:"操作",menu:[ {text:"我的订单",handler:myOrder}, {text:"资金管理",handler:moneyManager} ]} ] }, tabPanel ] }); &nbsp; function&nbsp;myOrder(){ var&nbsp;tabPage = tabPanel.add({ //动态添加tab页 title: '我的订单', html : '我的订单', closable : true//允许关闭 }) tabPanel.setActiveTab(tabPage);//设置当前tab页 } function&nbsp;moneyManager(){ var&nbsp;tabPage = tabPanel.add({ //动态添加tab页 title: '资金管理', html : '资金管理', closable : true//允许关闭 }) tabPanel.setActiveTab(tabPage);//设置当前tab页 } &nbsp; }); </td> 
 </tr> 
 </tbody> 
</table>