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