程式扎記: [ ExtJS2.0 開發指南 ] CH5 : 面板及佈局類 - TabPanel 頁簽

標籤

2011年11月7日 星期一

[ ExtJS2.0 開發指南 ] CH5 : 面板及佈局類 - TabPanel 頁簽

前言 : 
Ext.TabPanel 擴展自 Ext.Panel 組件. 每個 tab 頁簽都是一個 Ext.Panel, 一般情況下會有多個 tab 同時存在, 但是同一時刻只會有一個處於活動狀態. 在接下來的 3 個範例分別介紹不同的 tab 頁產生方式, 每一種方式都有自己的特點與適用範圍, 可以滿足不同的開發需求. 下表列出了 Ext.TabPanel 的主要配置項. 
 
 

通過 items 添加標籤頁 : 
在本例中使用常用的 items 配置項創建多個 tab 標籤頁, 並設置當標籤頁超寬時自動出現標籤滾動條. 


執行結果 : 
 

通過頁面 div 自動添加標籤頁 : 
在代碼 5-21 中透過使用 items 配置項創建了所需的 tab 頁, 但這並不是創建 tab 頁的唯一方式, Ext.TabPanel 還提供自動查找頁面中有效 div 並自動將其轉換成 tab 頁的功能. 所謂的有效 div 是指該 div 必須處於 Ext.TabPanel 渲染目標 html 元素的內部 (即 applyTo 配置項指定的 html 元素), 該 div 必須具有正確的樣式類, 默認是 'x-tab', 如果不使用默認值則需要設置 autoTabSelector 配置項指定樣式類. 下面代碼是簡單範例.


執行結果 : 
 
檢視執行結果會發現第六個 div 並沒有像其他 5 個 div 放在
的內部而是在外部. 因而第 6 個 div 是無效的 div 故沒有進行轉換而保持原始狀態. 

動態添加標籤頁 : 
前兩個範例中 tab 頁都是通過靜態方式創建, 但是在實際應用中對 tab 頁的動態添加與刪除也是非常重要的應用. 因此接下來的範例會創建一個支持動態添加和刪除 tab 頁的簡單應用. 透過設置tab頁面的配置項 closeable 為 true, 會在 tab 標籤上顯示一個關閉按鈕來實現刪除效果. 


執行結果 : 




沒有留言:

張貼留言

網誌存檔

關於我自己

我的相片
Where there is a will, there is a way!