选项板概述
2019獨角獸企業重金招聘Python工程師標準>>>
1、選項板概述選項面板是一個包括一個或多個選項卡(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節點應用于選項板?？聪旅娴睦?#xff1a;
<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。代碼如下：
添加按鈕的事件響應函數內容如下：
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://my.oschina.net/zhuyongfei/blog/130260
總結
- 上一篇： 梦到自己父亲被打伤了这是什么梦
- 下一篇： oracle技术之查询初始化参数的方法（