當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

选项板概述

發布時間：2023/11/29 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了选项板概述小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

1、選項板概述

選項面板是一個包括一個或多個選項卡(Tab)，同一時刻只顯示一個選項卡的這種用戶界面。比如下圖的IE選項設置界面中，就是一個選項板的應用，選項板上有“常規”、“安全”、“隱私”等選項卡。

2、Ext.TabPanel

Ext中提供了選項板控件TabPanel，由類Ext.TabPanel來定義，該類直接繼承自Ext.Panel，因此他實際上也是一個包含特定特性的面板。看下面的代碼：

上面的代碼定義了一個簡單的選項面板，該面板中包含三個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"><link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ext-3.2.0/resources/css/ext-all.css"/><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

總結

以上是生活随笔為你收集整理的选项板概述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

选项