选项卡TabPanel控件
選項(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來定義，該類直接繼承自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頁面中符合特殊條件的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，然后通過applyTo項(xiàng)指定把頁面中包含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腳本庫(兩個(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)來同等處理。
?
4、控制選項(xiàng)板的內(nèi)容
選項(xiàng)板TabPanel中的選項(xiàng)Tab項(xiàng)可以在初始化的時(shí)候通過items時(shí)候指定，也可以在TabPanel對(duì)象創(chuàng)建以后，使用add()、insert()或remove等來動(dòng)態(tài)添加或刪除其中的選項(xiàng)卡Tab。為了演示對(duì)面板中tab的操作，我們可以給上面的程序簡(jiǎn)單的添加一個(gè)工具欄按鈕，當(dāng)點(diǎn)擊按鈕的時(shí)候在選項(xiàng)面板中動(dòng)態(tài)添加tab。代碼如下：
<script type="text/javascript">Ext.onReady(function(){
var i=0;
var tab=new Ext.TabPanel({
renderTo: Ext.getBody(),
width:500,
height:200,
enableTabScroll:true,
activeTab:0,
bbar:[{
text:"添加",
handler:function(){
tab.add({
title:"新面板"+i++,
closable : true
});
}
}],
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)行效果如下：
添加按鈕的事件響應(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è)按鈕來實(shí)現(xiàn)關(guān)閉所有打開的Tab，該按鈕的定義代碼如下：
{
text:"關(guān)閉所有面板",
handler: function(){
tab.items.each(function(p){
if(p.closable)tab.remove(p);
}
}
}
轉(zhuǎn)載于:https://www.cnblogs.com/linjiqin/archive/2011/06/23/2088189.html
總結(jié)
以上是生活随笔為你收集整理的选项卡TabPanel控件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle中如何移动数据文件
- 下一篇： Silverlight 应用程序之间在客