选项卡TabPanel控件
選項面板是一個包括一個或多個選項卡(Tab)，同一時刻只顯示一個選項卡的這種用戶界面。比如下圖的IE選項設置界面中，就是一個選項板的應用，選項板上有“常規”、“安全”、“隱私”等選項卡。
2、Ext.TabPanel
Ext中提供了選項板控件TabPanel，由類Ext.TabPanel來定義，該類直接繼承自Ext.Panel，因此他實際上也是一個包含特定特性的面板。看下面的代碼：
<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> 運行結果如下：
上面的代碼定義了一個簡單的選項面板，該面板中包含三個tab，初始化時顯示第一個tab內容。
?3、另外一種使用選項板的方式
也可以直接把html頁面中符合特殊條件的DIV標簽轉換成選項板中的選項，此時需要在TabPanel的配置選項中把autoTabs項設置為true，把deferredRender項設置為false，然后通過applyTo項指定把頁面中包含class="x-tab"這種樣式的子節點的DOM節點應用于選項板。看下面的例子：
<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腳本庫(兩個，一個驅動adapter,另外一個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="選項1">A simple tab</div>
<div class="x-tab" title="選項2">Another one</div>
<div title="選項3">
<div class="x-tab" title="選項4">Another one</div>
</div>
</div>
</body>
由于“選項3”這個DIV標簽的class不是x-tab所以不會轉換成選項卡Tab，而“選項4”這個DIV雖然與“選項1”這些節點不在同一個層次，但仍然會把他作為Tab項來同等處理。
?
4、控制選項板的內容
選項板TabPanel中的選項Tab項可以在初始化的時候通過items時候指定，也可以在TabPanel對象創建以后，使用add()、insert()或remove等來動態添加或刪除其中的選項卡Tab。為了演示對面板中tab的操作，我們可以給上面的程序簡單的添加一個工具欄按鈕，當點擊按鈕的時候在選項面板中動態添加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> 運行效果如下：
添加按鈕的事件響應函數內容如下：
tab.add({title:"新面板"+i++,closable : true});
我們直接調用選項面板的add方法，就可以把一個面板添加到選項板中，成為一個新的tab。closeable表示該面板可以關閉，因此在tab上會出現一個關閉tab的圖標，點擊該圖標可以關閉該面板。
可以使用迭代功能，實現批量關閉選項板TabPanel中的所有Tab，比如，可以在上面的bbar中，添加一個按鈕來實現關閉所有打開的Tab，該按鈕的定義代碼如下：
{
text:"關閉所有面板",
handler: function(){
tab.items.each(function(p){
if(p.closable)tab.remove(p);
}
}
}
轉載于:https://www.cnblogs.com/linjiqin/archive/2011/06/23/2088189.html
總結
以上是生活随笔為你收集整理的选项卡TabPanel控件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle中如何移动数据文件
- 下一篇： Silverlight 应用程序之间在客