选项板概述
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
1、選項(xiàng)板概述選項(xiàng)面板是一個(gè)包括一個(gè)或多個(gè)選項(xiàng)卡(Tab)，同一時(shí)刻只顯示一個(gè)選項(xiàng)卡的這種用戶界面。比如下圖的IE選項(xiàng)設(shè)置界面中，就是一個(gè)選項(xiàng)板的應(yīng)用，選項(xiàng)板上有“常規(guī)”、“安全”、“隱私”等選項(xiàng)卡。
2、Ext.TabPanel
Ext中提供了選項(xiàng)板控件TabPanel，由類Ext.TabPanel來(lái)定義，該類直接繼承自Ext.Panel，因此他實(shí)際上也是一個(gè)包含特定特性的面板。看下面的代碼：
<script type="text/javascript">Ext.onReady(function(){ new Ext.TabPanel({renderTo: Ext.getBody(),width: 300,height: 200,enableTabScroll:true,activeTab: 0,items: [{title:"面板1",html:"<h1>this is the first panel!</h1>"}, {closable : true,title:"面板2",html:"<h1>this is the second panel!</h1>"}, {closable : true,title:"面板3",html:"<h1>this is the third panel!</h1>"}]});});</script> 運(yùn)行結(jié)果如下：上面的代碼定義了一個(gè)簡(jiǎn)單的選項(xiàng)面板，該面板中包含三個(gè)tab，初始化時(shí)顯示第一個(gè)tab內(nèi)容。
3、另外一種使用選項(xiàng)板的方式
也可以直接把html頁(yè)面中符合特殊條件的DIV標(biāo)簽轉(zhuǎn)換成選項(xiàng)板中的選項(xiàng)，此時(shí)需要在TabPanel的配置選項(xiàng)中把a(bǔ)utoTabs項(xiàng)設(shè)置為true，把deferredRender項(xiàng)設(shè)置為false，然后通過(guò)applyTo項(xiàng)指定把頁(yè)面中包含class="x-tab"這種樣式的子節(jié)點(diǎn)的DOM節(jié)點(diǎn)應(yīng)用于選項(xiàng)板。看下面的例子：
<head><meta http-equiv="description" content="This is my page"><!-- 引入ExtJS樣式文件 --><link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ext-3.2.0/resources/css/ext-all.css"/><!-- 引入ExtJS腳本庫(kù)(兩個(gè)，一個(gè)驅(qū)動(dòng)adapter,另外一個(gè)ext-all.js) --><script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/adapter/ext/ext-base.js"></script><script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){ new Ext.TabPanel({applyTo: 'test',activeTab: 0,deferredRender: false,autoTabs: true });});</script></head><body><div id="test"><div class="x-tab" title="選項(xiàng)1">A simple tab</div><div class="x-tab" title="選項(xiàng)2">Another one</div><div title="選項(xiàng)3"><div class="x-tab" title="選項(xiàng)4">Another one</div></div></div></body>由于“選項(xiàng)3”這個(gè)DIV標(biāo)簽的class不是x-tab所以不會(huì)轉(zhuǎn)換成選項(xiàng)卡Tab，而“選項(xiàng)4”這個(gè)DIV雖然與“選項(xiàng)1”這些節(jié)點(diǎn)不在同一個(gè)層次，但仍然會(huì)把他作為Tab項(xiàng)來(lái)同等處理。
4、控制選項(xiàng)板的內(nèi)容
選項(xiàng)板TabPanel中的選項(xiàng)Tab項(xiàng)可以在初始化的時(shí)候通過(guò)items時(shí)候指定，也可以在TabPanel對(duì)象創(chuàng)建以后，使用add()、insert()或remove等來(lái)動(dòng)態(tài)添加或刪除其中的選項(xiàng)卡Tab。為了演示對(duì)面板中tab的操作，我們可以給上面的程序簡(jiǎn)單的添加一個(gè)工具欄按鈕，當(dāng)點(diǎn)擊按鈕的時(shí)候在選項(xiàng)面板中動(dòng)態(tài)添加tab。代碼如下：
添加按鈕的事件響應(yīng)函數(shù)內(nèi)容如下：
tab.add({title:"新面板"+i++,closable : true});
我們直接調(diào)用選項(xiàng)面板的add方法，就可以把一個(gè)面板添加到選項(xiàng)板中，成為一個(gè)新的tab。closeable表示該面板可以關(guān)閉，因此在tab上會(huì)出現(xiàn)一個(gè)關(guān)閉tab的圖標(biāo)，點(diǎn)擊該圖標(biāo)可以關(guān)閉該面板。
可以使用迭代功能，實(shí)現(xiàn)批量關(guān)閉選項(xiàng)板TabPanel中的所有Tab，比如，可以在上面的bbar中，添加一個(gè)按鈕來(lái)實(shí)現(xiàn)關(guān)閉所有打開(kāi)的Tab，該按鈕的定義代碼如下：
{text:"關(guān)閉所有面板",handler: function(){tab.items.each(function(p){ if(p.closable)tab.remove(p);}}}轉(zhuǎn)載于:https://my.oschina.net/zhuyongfei/blog/130260
總結(jié)
- 上一篇： 梦到自己父亲被打伤了这是什么梦
- 下一篇： oracle技术之查询初始化参数的方法（