ExtJS擴(kuò)展 垂直tabLayout實(shí)現(xiàn)代碼
更新時(shí)間：2009年06月21日 23:41:02 作者：
最近在做一個(gè)項(xiàng)目時(shí)，項(xiàng)目中使用了ExtJS，有些內(nèi)容要分頁簽顯示，而出于項(xiàng)目要求，頁簽只能垂直分布
但ExtJS中的TabPanel只能水平顯示，搜索了一下Ext論壇，發(fā)現(xiàn)有垂直TabLayout的擴(kuò)展，但垂直tab的頁簽內(nèi)容是水平顯示的，且頁簽多了之后也不能通過設(shè)置enableScroll屬性使其能滾動(dòng)，為了適應(yīng)項(xiàng)目的需求，本人對TabLayout進(jìn)行了擴(kuò)展，使其支持垂直頁簽顯示，支持頁簽很多時(shí)的滾動(dòng)。效果如下：
該組件有兩種使用方式，一是擴(kuò)展方式，二是復(fù)寫方式。其中第一種方式需要引入附件中的TabPanel.js以及ext-patch.css，同時(shí)需要將兩個(gè)圖片放在ext-patch.css同目錄下，在創(chuàng)建組件時(shí)需要?jiǎng)?chuàng)建Ext.ux.TabPanel；
例：
aa = new Ext.ux.TabPanel({
tabPosition: 'left',
autoScroll: true,
deferredRender: false,
activeTab: 0,
enableTabScroll: true,
applyTo: 'aaa',
items: [
bb = new Ext.Panel({layout:'fit',
title:'基礎(chǔ)資料',
iconCls:'aaa',
closable: true,
html: '基礎(chǔ)資料'
}),cc = new Ext.Panel({layout:"fit",
title:"基礎(chǔ)資料",
closable: true,
html: '基礎(chǔ)資料'
})]
});
第二種方式需要引入附件中的TabPanel2.js以及ext-patch.css，同時(shí)需要將兩個(gè)圖片放在ext-patch.css同目錄下，在創(chuàng)建組件時(shí)需要?jiǎng)?chuàng)建Ext.TabPanel。
例：
aa = new Ext.TabPanel({
tabPosition: 'left',
autoScroll: true,
deferredRender: false,
activeTab: 0,
enableTabScroll: true,
applyTo: 'aaa',
items: [
bb = new Ext.Panel({layout:'fit',
title:'基礎(chǔ)資料',
iconCls:'aaa',
closable: true,
html: '基礎(chǔ)資料'
}),cc = new Ext.Panel({layout:"fit",
title:"基礎(chǔ)資料",
closable: true,
html: '基礎(chǔ)資料'
})]
});
兩種使用方式展現(xiàn)效果相同，tabPosition屬性同時(shí)支持top/right/bottom/left。
附件文件說明：
TabPanel.js 擴(kuò)展Ext.TabPanel
TabPanel2.js 復(fù)寫Ext.TabPanel中的相關(guān)方法
ext-patch.css 本文組件所使用的css
*.gif 為設(shè)置了enableScroll屬性時(shí)需要的兩個(gè)滾動(dòng)按鈕圖片
打包下載
該組件有兩種使用方式，一是擴(kuò)展方式，二是復(fù)寫方式。其中第一種方式需要引入附件中的TabPanel.js以及ext-patch.css，同時(shí)需要將兩個(gè)圖片放在ext-patch.css同目錄下，在創(chuàng)建組件時(shí)需要?jiǎng)?chuàng)建Ext.ux.TabPanel；
例：
復(fù)制代碼 代碼如下:
aa = new Ext.ux.TabPanel({
tabPosition: 'left',
autoScroll: true,
deferredRender: false,
activeTab: 0,
enableTabScroll: true,
applyTo: 'aaa',
items: [
bb = new Ext.Panel({layout:'fit',
title:'基礎(chǔ)資料',
iconCls:'aaa',
closable: true,
html: '基礎(chǔ)資料'
}),cc = new Ext.Panel({layout:"fit",
title:"基礎(chǔ)資料",
closable: true,
html: '基礎(chǔ)資料'
})]
});
第二種方式需要引入附件中的TabPanel2.js以及ext-patch.css，同時(shí)需要將兩個(gè)圖片放在ext-patch.css同目錄下，在創(chuàng)建組件時(shí)需要?jiǎng)?chuàng)建Ext.TabPanel。
例：
復(fù)制代碼 代碼如下:
aa = new Ext.TabPanel({
tabPosition: 'left',
autoScroll: true,
deferredRender: false,
activeTab: 0,
enableTabScroll: true,
applyTo: 'aaa',
items: [
bb = new Ext.Panel({layout:'fit',
title:'基礎(chǔ)資料',
iconCls:'aaa',
closable: true,
html: '基礎(chǔ)資料'
}),cc = new Ext.Panel({layout:"fit",
title:"基礎(chǔ)資料",
closable: true,
html: '基礎(chǔ)資料'
})]
});
兩種使用方式展現(xiàn)效果相同，tabPosition屬性同時(shí)支持top/right/bottom/left。
附件文件說明：
TabPanel.js 擴(kuò)展Ext.TabPanel
TabPanel2.js 復(fù)寫Ext.TabPanel中的相關(guān)方法
ext-patch.css 本文組件所使用的css
*.gif 為設(shè)置了enableScroll屬性時(shí)需要的兩個(gè)滾動(dòng)按鈕圖片
打包下載
您可能感興趣的文章:
- Android 中TabLayout自定義選擇背景滑塊的實(shí)例代碼
- Android中TabLayout結(jié)合ViewPager實(shí)現(xiàn)頁面切換效果
- AndroidUI組件SlidingTabLayout實(shí)現(xiàn)ViewPager頁滑動(dòng)效果
- Android TabLayout實(shí)現(xiàn)京東詳情效果
- android TabLayout使用方法詳解
- Android TabLayout(選項(xiàng)卡布局)簡單用法實(shí)例分析
- Android使用Fragment打造萬能頁面切換框架
- Android中使用TabHost 與 Fragment 制作頁面切換效果
- Android編程之頁面切換測試實(shí)例
- Android中TabLayout結(jié)合ViewPager實(shí)現(xiàn)頁面切換
相關(guān)文章
Extjs4 消息框去掉關(guān)閉按鈕(類似Ext.Msg.alert)
類似Ext.Msg.alert();但沒有關(guān)閉按鈕,由于Extjs4消息框中的關(guān)閉按鈕，沒有執(zhí)行回調(diào)函數(shù)，點(diǎn)擊關(guān)閉按鈕后，直接關(guān)閉窗口，接下來為大家詳細(xì)介紹下去掉關(guān)閉按鈕2013-04-04
ext前臺接收action傳過來的json數(shù)據(jù)示例
這篇文章以示例的方式為大家介紹了ext前臺接收action傳過來的json數(shù)據(jù),需要的朋友可以參考下2014-06-06
關(guān)于extjs treepanel復(fù)選框選中父節(jié)點(diǎn)與子節(jié)點(diǎn)的問題
實(shí)現(xiàn)帶有復(fù)選框的樹,選中父節(jié)點(diǎn)時(shí)，選中所有子節(jié)點(diǎn)。取消所有子節(jié)點(diǎn)時(shí)，才能取消根節(jié)點(diǎn),感興趣的朋友可以了解下本文2013-04-04
Ext中下拉列表ComboBox組件store數(shù)據(jù)格式用法介紹
本文為大家詳細(xì)介紹下Ext中下拉列表ComboBox組件store數(shù)據(jù)格式的基本用法，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
ExtJS Ext.MessageBox.alert()彈出對話框詳解
Ext.MessageBox是一個(gè)工具類，他繼承自O(shè)biect對象，用來生成各種風(fēng)格的信息提示對話框，Ext.Msg是該類的別名，使用Ext.MessageBox和用Ext.Msg效果是一樣的，而后者提供了更簡單的方式。2010-04-04
ExtJS table布局使用說明，需要的朋友可以參考下。2009-10-10
Extjs組件的定義在網(wǎng)上看到了一個(gè)實(shí)例，于是拷了下來留著以后用，現(xiàn)在把它曬出來與大家一起分享，感興趣的各位可不要錯(cuò)過了哈2013-06-06
解決Extjs 4 Panel作為Window組件的子組件時(shí)出現(xiàn)雙重邊框問題
Extjs的Panel和Window等組件在默認(rèn)情況下是帶邊框的，通常情況下，單獨(dú)使用沒有什么關(guān)系，但是將Panel作為Window組件的子組件時(shí)就會出現(xiàn)雙重邊框的現(xiàn)象于是想辦法將兩重邊框去掉，變成單邊框,感興趣的朋友可以了解下2013-01-01
這篇文章的主題是分享下我使用 ExtJS 操作 DOM 元素的一些經(jīng)驗(yàn)，作為一個(gè)程序員是需要不斷學(xué)習(xí)的，喜歡的朋友可以學(xué)習(xí)下2013-08-08
層序遍歷在ExtJs的TreePanel中的應(yīng)用
今天幫朋友解決了一個(gè)問題：使用ExtJs的TreePanel控件，如何得到樹的第一個(gè)葉子節(jié)點(diǎn)的信息。2009-10-10